1

http://jsfiddle.net/6rwUC/3/

As you can see on the jsfiddle link, I'm trying to create one layout for image previews. I would like to have resized images keeping original ratio, just cut off what overlays the parent div. How can I do this ?

.image-column {
background: #cecece;
width: 100%;
height: 180px;
overflow: hidden;}

.image-column a img {
position:relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;}
user3187469
  • 1,311
  • 6
  • 22
  • 30

2 Answers2

2

If CSS3 is an option, you could use transform with a negative translate of -50% horizontally and vertically, while the element is positioned with left: 50% and top: 50% as follows:

.image-column a img {
    position:relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

WORKING DEMO.

Update

According to your update:

I would like to have resized images keeping original ratio, just cut off what overlays the parent div.

The only pure CSS solution is using the images as background-image for the <a> elements, while you're using background-size: cover;:

<div class="image-column">
    <a href="#"></a>
</div>

.image-column a {
    display: block;
    height: 100%;
    background: url(http://domain.com/path/to/image.jpg) 50% 50% no-repeat;
    background-size: cover;
}

However, if the height/width ratio of the box is lower than the image, you can use the old answer including max-width: 100%; for the image: Online Demo.

And if the height/width ratio of the box is higher than the image, you need to use max-height: 100% for the image: Online Demo.

For dynamic calculation, you'll need to use JavaScript. Here is a similar topic on SO.

Community
  • 1
  • 1
Hashem Qolami
  • 88,138
  • 25
  • 132
  • 151
  • Thanks but that's now what I'm looking for. If you look at new example, http://jsfiddle.net/6rwUC/9/ , I've added different size 3rd image and it shows only small part of it. What I want is to show is resized images keeping original ratio, just cut off what overlays the parent div. Like these thumbnails for example: http://news.yahoo.com/ – user3187469 Feb 20 '14 at 11:50
  • Well, you should update your question, because of: `I would like the thumbnails to show only the center of their original images`. – Hashem Qolami Feb 20 '14 at 11:53
  • Sry about the confusion, I've fixed it now. – user3187469 Feb 20 '14 at 12:03
  • Thank you for detailed explanation. So there is no way to use max-width:100% and max-heigh:100% together here? Some images might have smaller ratio and would need this. – user3187469 Feb 20 '14 at 13:24
  • @user3187469 You are welcome. If you use them both, the image will be always smaller than the box and won't cover the entire space. Say that, you need to use JavaScript to compare the ratio of the box and the image, then apply the appropriate CSS property. – Hashem Qolami Feb 20 '14 at 13:28
1

Try this out: http://jsfiddle.net/6rwUC/4/ I've simply added max-width: 100%;

Mihey Egoroff
  • 1,519
  • 14
  • 19
  • That's not what I want though. I'd like images to fully overlay the background
    and that the preview show center of image without resizing it (on your jsfiddle last image shows top of the image instead).
     – user3187469 Feb 20 '14 at 11:31