Как я могу автоматически изменить размер изображения, чтобы соответствовать контейнеру 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>