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

Question

Как автоматически изменить размер большого изображения, чтобы оно помещалось в контейнер div меньшей ширины при сохранении соотношения ширина: высота?

---

Пример: stackoverflow.com - когда изображениевставляется на панель редактора, и изображение слишком велико для размещения на странице, размер изображения автоматически изменяется.

Answer 1

Я исправил эту проблему, используя следующий код:

<div class="container"><img src="image_url" /></div>

.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

Answer 2

Все предоставленные ответы, включая принятый, работают только при условии, что оболочка div имеет фиксированный размер. Вот как это сделать независимо от размера div оболочки, и это очень полезно, если вы разрабатываете адаптивную страницу:

Напишите эти объявления в вашем DIV селекторе:

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

Затем поместите эти объявления в ваш селектор IMG:

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

ОЧЕНЬ ВАЖНО:

Значение maxHeight должно быть одинаковым для обоих селекторов DIV и IMG.

Answer 3

Поскольку ответил здесь , вы также можете использовать vh единицы вместо max-height: 100%, если она не работает в вашем браузере (например, Chrome):

img {
    max-height: 75vh;
}

Answer 4

Я вижу, что многие люди предлагают подходящее для объекта , что является хорошим вариантом. Но если вы хотите работать в старых браузерах, а также , есть другой способ сделать это легко.

Пожалуйста, проверьте мой ответ здесь: IE и Edge fix для подгонки объекта: обложка;

Это довольно просто. Подход, который я выбрал, состоял в том, чтобы поместить изображение внутри контейнера с absolute , а затем поместить его прямо в центр , используя комбинацию:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Как только оно окажется в центре, я даю образу

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Это дает изображению эффект Object-fit: cover.

---

Вот демонстрация вышеуказанной логики.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Эта логика работает во всех браузерах.

Answer 5

Если вы используете Bootstrap, вам просто нужно добавить класс img-responsive к тегу img:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Образы начальной загрузки

Answer 6

Простым решением является использование flexbox. Определите CSS контейнера для:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

Установите ширину содержащегося изображения на 100%, и вы должны получить хорошее центрированное изображение в контейнере с сохранением размеров.

Answer 7

Определите div просто как:

div.headerimg1 {
   position: absolute;
   top: 290px;
   left: 81px;
   width: 389px;
   height: 349px;
}

<div class="headerimg1">
    <img src="" style="max-height:100%;height:auto;width:100%;max-width:100%;margin:auto;display:inline;">
</div>

Answer 8

Или вы можете просто использовать:

background-position:center;
background-size:cover;

Теперь изображение займет все пространство div.

Answer 9

Решение легко с небольшим количеством математики ...

Просто поместите изображение в div, а затем в HTML-файл, где вы указываете изображение.Установите значения ширины и высоты в процентах, используя пиксельные значения изображения, чтобы вычислить точное отношение ширины к высоте.

Например, допустим, у вас есть изображение шириной 200 пикселей и высотой160 пикселей.Вы можете с уверенностью сказать, что значение ширины будет 100%, потому что это большее значение.Чтобы затем вычислить значение высоты, вы просто делите высоту на ширину, которая дает процентное значение 80%.В коде это будет выглядеть примерно так ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

Answer 10

Самый простой способ сделать это - использовать object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Если вы используете Bootstrap, просто добавьте класс img-responsive и измените на

.container img{
    object-fit: cover;
}