Как разместить изображение внутри div фиксированного размера, не искажая изображение?

Question

Есть ли способ разместить изображение внутри div фиксированного размера, не растягивая его?

У меня есть изображения, которые могут быть в альбомной или портретной ориентации внутри div 250px, проблема в том, что они действительно растягиваются.

Фактический размер изображения:

Текущий результат:

CSS -Код:

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

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

HTML -Код:

<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>

Answer 1

Первый "ваша ошибка" - вы помещаете изображение размером 300 пикселей в контейнер высотой 250 пикселей (переполнение 50 пикселей). Установите .container переполнение на scroll, чтобы увидеть это:

.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>

Подгонка объекта

Подгонка объекта будет работать только if Вы изменяете размер изображения или оболочки (И устанавливаете размер изображения относится к этой оболочке).

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

Basi c пример "изменение размера изображения" (не полезно):

Изменить размер изображения объектно-облегающая крышка - изображение 400x X 800 Вт - установить высоту 150xX150 Вт - нулевое искажение («эффект кадрирования»):

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

Basi c пример 2 (тоже не очень полезно)

Установите высоту / ширину изображения на 100% и установите высоту обертки (Like) в окне «).

<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>

Больше динамиков c пример:

Один "знаменитый" CSS трюк для решения этой проблемы:

• relative упаковщик (с любым размером, который вы хотите) & absolute 100% изображения в / ч внутри & object-fit:cover.

Используйте упаковку фиксированного размера

<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>

Использовать aspect-ratio 16: 9 box Очень оченьыыыыыыыыы - полезно (например, как сетка Instagram) - заставить все изображения иметь одинаковое соотношение сторон ).

Полный текст здесь: 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>

Answer 2

Не указывайте явную ширину или высоту в теге изображения. Вместо этого укажите

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

, если вы хотите указать только ширину, вы также можете выбрать height: auto; применить

Так что у меня есть пример с двумя картинками

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>

Я надеюсь, что это работает и для вас ...

Answer 3

Попробуйте "подгонка объекта: обложка"; на .Container img