2

Here is a JSFiddle to show what I mean: http://jsfiddle.net/p4toy2qq/. The Code is here:

HTML

<div class="container">
     <img src="image-of-any-size.jpg" alt="alt" />
</div>

CSS

.container { width: 100px; height: 100px; overflow: hidden; border: black solid 1px; margin: 10px;}
.container img { width: 100%; }

I basically want different sized images to fill out the divs, without the aspect ratio getting messed up. The overflow should be hidden, so the parts outside get 'cropped' off.

Any ideas?

NickEckhart
  • 458
  • 2
  • 8
  • 21
  • so you want the images to cover the complete height. and crop the width to keep the aspect ratio? – Mr_Green Oct 22 '14 at 07:32
  • may this links helps you out: [Make image fill div completely without stretching][1] BR! [1]: http://stackoverflow.com/questions/16739908/make-image-fill-div-completely-without-stretching – Christian A Oct 22 '14 at 07:33
  • http://jsfiddle.net/9h571x9k/ ? – Anonymous Oct 22 '14 at 07:36

4 Answers4

1

If you have the option to set them as background images you can use:

.container{
    background: url('something.jpg');
    background-size:cover;
    background-position:center center;
}

Note that some older browsers don't support background-size: http://caniuse.com/#search=background-size

Jon Snow
  • 3,682
  • 4
  • 30
  • 51
1

there's a method to do this.

.img-container{
position:relative;
width:100px;
height:100px;
display:block;
overflow:hidden;
text-align:center;
}

horizontal img

.img-container > img{
position:absolute;
top:0;
height:100%;
}

vertical img

.img-container > img{
position:absolute;
top:0;
width:100%;
}

demo

javiercf
  • 811
  • 7
  • 16
  • 1
    here with a demo and image centering in the container this does need to add a class according to the orientation of the image. : http://jsfiddle.net/webtiki/ktb3jngs/1/ – web-tiki Oct 22 '14 at 07:49
  • BTW your demo is the same as the OP – web-tiki Oct 22 '14 at 07:50
0

If you want to cover the height of the images inside the container, use background-image: auto 100% style instead of img tag and apply the image to the .container element directly.

Working Fiddle

Note: This solution is assuming that all your images have more than 100px of height as you have shown in the fiddle.

Update:

If you want to just cover the image completely inside the container then you can use background-image: cover

Working Fiddle

Community
  • 1
  • 1
Mr_Green
  • 40,727
  • 45
  • 159
  • 271
0

You could use the new object-fit property (currently webkit only)

1) Set object-fit: cover; on the image to ensure that the aspect ratio is kept, and

2) Set height: 100px to fill the box if the image is < 100px high.

FIDDLE

.container {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: black solid 1px;
  margin: 10px;
}
.container img {
  width: 100%;
  object-fit: cover;
  height: 100px;
}
<div class="container">
  <img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="alt" />
</div>

<div class="container">
  <img src="http://chennaionline.com/images/gallery/2013/June/20110623010938/Singam2_Suriya_Stills_Photos_Images_10.jpg" alt="alt" />
</div>

<div class="container">
  <img src="http://www.moviehdwallpapers.com/wp-content/uploads/2014/10/happy_diwali__sms_images_.jpg" alt="alt" />
</div>

You can read more about this new property in this webplatform article.

From the above article - regarding the 'cover' value:

The whole image is scaled down or expanded till it fills the box completely, the aspect ratio is maintained. This normally results in only part of the image being visible.

Also, here is a fiddle from the above article which demonstrates all the values of the object-fit property.

Danield
  • 121,619
  • 37
  • 226
  • 255