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.

Comments

Your email address will not be published. Required fields are marked *