Как настроить размер картинки в CSS

Чтобы настроить размер картинки в CSS, можно использовать свойства width и height. Эти свойства задают соответственно ширину и высоту элемента, включая изображения.

Например, чтобы установить ширину картинки на 300 пикселей и высоту на 200 пикселей, можно использовать такой CSS-код:

img {
    width: 300px;
    height: 200px;
}

Этот код изменяет размеры всех изображений на странице.

Если нужно изменить размер только одного изображения, нужно использовать селектор для этого изображения. Например:

#my-image {
    width: 300px;
    height: 200px;
}

В этом примере изображение имеет идентификатор my-image, который указан в HTML-коде в атрибуте id. Селектор #my-image выбирает только это изображение, и свойства width и height изменяют его размеры.

Если хотите изменить размер изображения без сохранения его пропорций, можно использовать только одно свойство width или height. Если установить только одно из этих свойств, другое задастся автоматически, сохраняя пропорции изображения.

Например, чтобы установить ширину изображения на 300 пикселей, а высоту на автоматическое значение, можно использовать такой CSS-код:

img {
    width: 300px;
    height: auto;
}

Это пропорционально изменит размер изображения, сохраняя его пропорции.