Как можно поменять размер изображения пропорционально CSS, что рассмотрим в этой статье. Свойство resize image используется в адаптивной сети, где размер изображения автоматически изменяется, где все создается чтоб все корректно соответствовало контейнеру div.
Свойство max-width в CSS используется для создания свойства изображения изменения размера. Свойство resize не будет работать, если ширина и также высота картинки определены в HTML.
Код
img {
max-width:100%;
height:auto;
}
Ширина также может быть использована вместо максимальной ширины, если это необходимо. Ключ должен использовать height: auto, чтобы переопределить любой атрибут height = ”…”, уже присутствующий на изображении.
Свойства CSS max-width и max-height прекрасно работают, но не поддерживаются многими браузерами.
HTML
Код
<div class = "serydupi-kedsav">
<p><img src=
"http://zornet.ru/_fr/80/1911847.png">
</p>
</div>
CSS
Код
.serydupi-kedsav {
width:auto;
text-align:center;
padding:20px;
}
img {
max-width:100%;
height:auto;
}
Демонстрация
Обычно используется для установки максимальной ширины: 100%; высота: авто; такие большие изображения не превышают ширину своих контейнеров. Другим способом является использование свойства подгонки объекта, это позволит подогнать изображение без пропорционального изменения.
HTML
Код
<div class = "vedesakop-admulkib">
<p><img src=
"http://zornet.ru/_fr/80/1911847.png">
</p>
</div>
CSS
Код
.vedesakop-admulkib {
width:auto;
text-align:center;
padding:20px;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
