Image fitting in container div

Question

I'm trying to fill containers with images but i can't find the solution.

If images are too short, I need to make them full height, but they can overflow the sides. If images are too narrow, I need to make them full width, but they can overflow the bottom.

<div class="cb-img-fw four-image">
    <a href="postURL"><img src="imageURL"></a>
</div>

and current css

.four-grid-post > .four-image{
max-height: 184px;
max-width: 271px;
overflow: hidden;
}

.four-grid-post > .four-image img{
min-width: 100%;
max-width: 100%;
height: auto;
}

I'm also open to jQuery solutions, but my content loads with ajax so it might cause some problems.

Possible duplicate of [How do I auto-resize an image to fit a div container](http://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container) — SynozeN Technologies, May 09 '17 at 10:54
@InnovaITveSolutions in that decision, the imаgе does not get out beyond the borders of the block. — Andrey Fedorov, May 09 '17 at 10:57
I think, it's duplicate of [Is there an equivalent to background-size: cover and contain for image elements?](http://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elements) — Tigran, May 09 '17 at 12:04

Tigran · Answer 1 · 2017-05-09T12:10:50.940

You can use object-fit and object-position CSS3 properties. They are not yet supported in Edge, but there is a polyfill. See feature support on CanIUse.

.four-grid-post > .four-image {
 display: inline-block;
 height: 184px;
 width: 271px;
 overflow: hidden;
 border: dashed 2px red;
}

.four-grid-post > .four-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: top center; /* To crop from the bottom */
}

<div class="four-grid-post">
 <div class="cb-img-fw four-image">
  <a href="postURL"><img src="http://placehold.it/400x300"></a>
 </div>
 <div class="cb-img-fw four-image">
  <a href="postURL"><img src="http://placehold.it/400x200"></a>
 </div>
 <div class="cb-img-fw four-image">
  <a href="postURL"><img src="http://placehold.it/300x400"></a>
 </div>
</div>

Andrey Fedorov · Answer 2 · 2017-05-09T11:03:51.967

I suggest to change the img on the css background.

.four-image {
  display: block;
  border: 1px solid gray;
  width: 271px;
  margin-bottom: 1em;
}

.four-image a {
  display: block;
  width: 271px;
  height: 184px;
  background-size: cover;
  background-position: center center;
}

<div class="cb-img-fw four-image">
  <a href="postURL" style="background-image: url('http://placehold.it/600x200');"></a>
  600x200
</div>
<div class="cb-img-fw four-image">
  <a href="postURL" style="background-image: url('http://placehold.it/200x600');"></a>
  200x600
</div>
<div class="cb-img-fw four-image">
  <a href="postURL" style="background-image: url('http://placehold.it/600x600');"></a>
  600x600
</div>

score 1 · Answer 3 · answered May 09 '17 at 11:21

try this script it will set your image as background image then you can give height and width to background image and make it background size cover

var images = $(".four-image").find("img");
 $.each(images, function (index, item) {
 var $item = $(item),
 src = $item.attr('src'),
 cont = $item.closest('.four-image').css('background-image', 'url(' + src + 
 ')');
});

Image fitting in container div

3 Answers3