Image To Fill Space
//Make image fill entire space clipping if needed
.my_img_style {
object-fit: cover;
width: 100px;
height: 100px;
}
Resizing but keep aspect ratio
img.some_class {
display: block;
max-width: 604px;
max-height: 270px;
width: 100%;
height: auto;
}
This also works well:
.some_class img {
display: block;
max-width: 100%;
max-height: 162px;
height: auto;
}
Responsive – Set max width but image shrinks if necessary
<div class="pfolio_image_single" style="max-width:530px; margin-right: auto; margin-left: auto;">
<img src="images/my_image.png" style="display:block; width:100%; height:auto;" />
</div>
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.