How to fit an image inside a fix sized div without distorting the image?

user_10575450 0
Viewed 5791

Is there a way to fit an image inside a fix sized div without stretching it?

I have images than can be landscape or portrait to fit inside 250px divs, the problem is ut gets really stretched.

Actual images size:

actual images

Current result:

images stretched to 250px

CSS-Code:

.container {
    position: relative;
    width: 250px;
    height: 250px;
    margin-bottom: 30px;
}

.container img {
    width: 100%;
    height: auto;
}

HTML-Code:

<div class="row text-center text-lg-left">
    <div th:each="inst, iStat : ${instances}" class="container"
     th:if="${inst.fileStatus} eq ${T(br.com.macrosul.stetho.entity.FileStatus).UPLOADED}">
    <a href="#" class="d-block mb-4 h-100"> <img class="img"
    data-target="#showMedia" data-toggle="modal"
        th:data-slide-to="${iStat.index}"
        style="width: 100%; height: 100%"
        th:src="@{'/instances/' + ${inst.id} + '/thumbnail' + ${folder != null ? '?folder=' + folder.id : ''}}"
         alt="">
      </a>
   </div>
</div>
image-size css image html
3 Answers

First "your mistake" - you put 300px image inside 250px height container (overflow of 50px). Set .container overflow to scroll to see this:

.container {
  position: relative;
  width: 250px;
  height: 250px;
  margin-bottom: 30px;
  overflow: scroll;
}

.container img {
  width: 100%;
  height: auto;
}
<div class="container">
<img class="img" src="https://i.picsum.photos/id/12/200/300.jpg">
</div>

object-fit

Object-fit will work only if you resize the image -or- the wrapper (And set image size related to this wrapper).

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Basic example "image resize" (Not useful):

Resize the image object-fit cover - 400h X 800W image - set height to 150hX150w - zero distorsion ("crop effect"):

<img style="width: 150px; height: 150px; object-fit: cover;" src="https://i.picsum.photos/id/10/400/800.jpg">

Basic example 2 (Also not so useful)

Set image height/width to 100% and set wrapper height (Like "window"). 

<div class="container" style="height: 200px;">
  <img style="width: 100%; height: 100%; object-fit:cover;" class="img" src="https://i.picsum.photos/id/12/500/600.jpg">
</div>

More dynamic example:

One "famous" CSS trick to solve this issue:

  • relative wrapper (With any size you want) & absolute 100% w/h image inside & object-fit:cover.

Use fixed size wrapper

<div style="position: relative; height: 200px; width: 200px">
  <img style="position: absolute; top:0; right: 0; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover;" src="https://i.picsum.photos/id/10/400/800.jpg">
</div>

Use aspect-ratio 16:9 box Very veryyyyyyyyy - Useful (Like instagram grid for example - force all images to be on the same aspect ratio).

Full tuturial here: https://css-tricks.com/aspect-ratio-boxes/ https://css-tricks.com/aspect-ratio-boxes/

https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

<h5>16:9 box</h5>
<div style="position: relative; padding-top: 56.25%;">
  <img style="position: absolute; width: 100%; height: 100%; top:0; right:0; left:0; right: 0;object-fit: cover;" src="https://i.picsum.photos/id/10/700/1100.jpg">
</div>

user_92915570

Try "object-fit: cover;" on the .Container img

user_127252680

Do not specify an explicit width or height on the image tag. Give it instead

max-width:100%;
max-height:100%;

if you only want to specify a width you can also choose height: auto; apply

So I have here an example with two pictures

img {
    max-width: 100%;
    max-height: 100%;
}


.square_little {
    height: 40px;
    width: 40px;
}

.square_big {
    height: 200px;
    width: 200px;
}
Square Div 40px x 40px
<div class="square_little">
    <img src="https://recruiterflow.com/blog/wp-content/uploads/2017/10/stackoverflow.png">
</div>

Square Div 200px x 200px
<div class="square_big">
    <img src="https://recruiterflow.com/blog/wp-content/uploads/2017/10/stackoverflow.png">
</div>

I hope that works for you too...

user_126326990
Related