Чтобы изменить размер картинки при помощи CSS, можно использовать свойства width
и height
.
Например, можно задать ширину и высоту картинки так:
img {
width: 300px;
height: 200px;
}
Это изменит размер любых тегов <img>
на странице на ширину 300 пикселей и высоту 200 пикселей.
Кроме того, можно задавать размеры картинок в процентах относительно контейнера, в котором они находятся. Например:
img {
width: 50%;
height: auto;
}
Это установит ширину картинки на 50% от ширины родительского контейнера, а высота будет автоматически рассчитана, чтобы сохранить соотношение сторон.
Также можно изменять размер фоновых картинок при помощи свойств background-size
. Например:
div {
background-image: url('path/to/image.jpg');
background-size: cover;
}
Это установит фоновую картинку для элемента <div>
и масштабирует ее так, чтобы она полностью покрывала задний план элемента.
Важно помнить, что изменение размера картинок может привести к ухудшению качества изображения, если оно будет растянуто или сжато. Поэтому лучше использовать изображения исходного размера или сделать их большими и масштабировать с помощью CSS при помощи свойств max-width
и max-height
.