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

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


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

37 ответов

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

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

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

Проверьте мои ответы /questions/37160548/sdelat-izobrazhenie-otzyivchivyim-samyij-prostoj-sposob/37160558#37160558

img{
    width: 100%;
    max-width: 800px;
}

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

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

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

С использованием max-height: 100%из предыдущего ответа позволяет изменять размер изображения в соответствии с изменением размера содержащего окна, когда окно вытягивается / расширяется от горизонтальных краев . Вытягивание снизу приведет к срезанию видимости изображения, если оно поднято, вместо масштабирования изображения. Затем, используя, max-height: 75vh;позволял масштабировать изображение, если тянуть снизу, но не по бокам . Соединение обоих вместе дало результаты для масштабирования изображения в соответствии с контейнером, вытянутым в обоих направлениях;

      .myPics {
  max-height: 75vh;
  max-width: 100%;
}

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

      .myPics {  
  width: 90%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

U используйте следующий класс для решения этой проблемы;

      .custom-image{height: auto; width: auto; max-height: 100%; max-width: 100%; object-fit: contain;}

Лучшее решение на свете

Определить 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>
Другие вопросы по тегам