How to display thumbnails of various sizes correctly?

Question

This is what I have right now:

It looks good only when photos are of big resolution and mostly landscape.

This is my HTML and CSS:

<div class="upload-thumb ng-scope visible">
    <span class="delete-media">
      <span class="icon-bin">
        </span>
    </span>
    <img src="">
</div>

.upload-thumb {
    cursor: pointer;
    overflow: hidden;
    float: left;
    width: 44%;
    /* height: 72px; */
    margin: 0 11px 10px 0;
    position: relative;
}

.upload-thumb img {
    width: 100%;
    height: inherit;
}

This is how it looks if I remove fixed height:

Photos are not scaled, but I would like to have them not scaled and placed in a fixed size container as in my first screen. I know that part of the image might be cut, but I am aware of this. How this could be done?

You are looking for the `fit-content` CSS property, probably with the `cover` value. — , Apr 29 '17 at 07:03
fit-content is experimental and has very limited support: https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content — Eeks33, Apr 29 '17 at 22:02

score 0 · Accepted Answer · edited May 23 '17 at 11:46

You could do this with css overflow: hidden. Set the dimension you want scaled on the image width, and the dimension you want to crop on the containing div with overflow hidden: Plunkr: https://plnkr.co/edit/AzoaVufPDioGHQHk4RhG?p=preview

CSS

.tmb {
  width: 200px;
  overflow: hidden;
 }
 .tmb img {
  height: 100px;
 }

Html:

<div class="tmb">
  <img src="https://www.w3schools.com/css/trolltunga.jpg" />
</div>

Your other option is to use background images and positioning/sizing.

See this article it explains both methods well: How to automatically crop and center an image

How to display thumbnails of various sizes correctly?

1 Answers1