Как правильно вставлять большие изображения на страницу?

Question

[cracker-test]

Есть блок, который должен быть 800х400 пикселей. Как правильно в него вставить картинку 1600х800 пикселей так, чтобы картинка подстраивалась под размеры данного блока? Сейчас проблема в том, что картинка у меня сжимается очень сильно

Comments

[Антон Литвиненко]

покажите пример? я знаю два сценариа - когда большая картинка вылазит или когда ограничивается размерами блока. чтобы уменьшалась - не встречал

[ambisinister One]

cracker-test, Уменьшение изображения влечёт за собой увеличение контраста и к визуальному сжатию и наложению пикселов. Картинку надо заранее уменьшить и сжать.
Большее количество точек нельзя впихнуть в меньшую площадь, не повредив изображение.

[cracker-test]

Антон Литвиненко, мне нужно чтобы она ограничивалась размерами блока

Answer 1

[Ankhena]

чтобы картинка подстраивалась под размеры данного блока

Если это фон: background-size
Если img, то object-fit

Как правильно вставлять большие изображения на страницу?

Уменьшить до нужного размера. Понятно, что при адаптиве картинки все равно не будут равны размерам блока, но постараться использовать разумные размеры.
И соответственно, для ретины и разных размеров вьюпорта, либо тег picture для контентных либо media для фоновых.

Answer 2

[Антон Литвиненко]

cracker-test, глобально пишем такие стили

img {
	max-width: 100%;
	height: auto;
}

если картинка меньше контейнера а нужно растянуть на всю ширину, то можно добавить картинке класс

img.full-width {
	width: 100%;
}

Answer 3

[abylalikkkk]

htmlbook.ru/css/background-size

Answer 4

[Dan_3115]

Например так:

background-image: url(https://mysite.ru/img/logo.png);
background-size: cover;
width: 800px;
height: 400px;

Answer 5

[NeKt0]

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}