Измените размер изображения пропорционально с помощью CSS

Опубликовано: 18 Декабря, 2021

Свойство изменения размера изображения используется в адаптивном вебе, где изображение автоматически изменяется в соответствии с размером контейнера div. Свойство max-width в CSS используется для создания свойства изменения размера изображения. Свойство resize не будет работать, если ширина и высота изображения определены в HTML.

Синтаксис:

img {
    максимальная ширина: 100%;
    высота: авто;
}

При желании можно также использовать ширину вместо max-width. Ключ в том, чтобы использовать height: auto, чтобы переопределить любой атрибут height = ”…”, уже присутствующий на изображении.
Свойства CSS max-width и max-height отлично работают, но не поддерживаются многими браузерами.

Пример 1:

 <!DOCTYPE html>
 < html >
    < head >
        < title >cell padding</ title >
        < style >
            .gfg {
                width:auto;
                text-align:center;
                padding:20px;
            }
            img {
                max-width:100%;
                        height:auto;
            }
        </ style >
    </ head >
    < body >
        < div class = "gfg" >
            < p id = "my-image" >< img src =
 " https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-17.png " >
            </ p >
        </ div >
    </ body >
 </ html > 

Выход:

Обычно используется установка max-width: 100%; высота: авто; поэтому большие изображения не превышают ширину своих контейнеров. Другой способ - использование свойства object-fit, это будет соответствовать изображению, не меняя пропорционально.

Пример 2:

 <!DOCTYPE html>
 < html >
    < head >
        < title >cell padding</ title >
        < style >
            .gfg {
                width:auto;
                text-align:center;
                padding:20px;
            }
            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        </ style >
    </ head >
    < body >
        < div class = "gfg" >
                < p id = "my-image" >< img src =
 " https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-17.png " >
            </ p >
        </ div >
    </ body >
 </ html > 

Выход:

Вопросы о Web технологиях Picked HTML CSS

Измените размер изображения пропорционально с помощью CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ