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

Есть блок, который должен быть 800х400 пикселей. Как правильно в него вставить картинку 1600х800 пикселей так, чтобы картинка подстраивалась под размеры данного блока? Сейчас проблема в том, что картинка у меня сжимается очень сильно
  • Вопрос задан
  • 369 просмотров
Решения вопроса 4
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
чтобы картинка подстраивалась под размеры данного блока

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

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

Уменьшить до нужного размера. Понятно, что при адаптиве картинки все равно не будут равны размерам блока, но постараться использовать разумные размеры.
И соответственно, для ретины и разных размеров вьюпорта, либо тег picture для контентных либо media для фоновых.
Ответ написан
Комментировать
AntonLitvinenko
@AntonLitvinenko
HTML coder
cracker-test, глобально пишем такие стили
img {
	max-width: 100%;
	height: auto;
}

если картинка меньше контейнера а нужно растянуть на всю ширину, то можно добавить картинке класс
img.full-width {
	width: 100%;
}
Ответ написан
Комментировать
@abylalikkkk
Ответ написан
Комментировать
@Dan_3115
Например так:
background-image: url(https://mysite.ru/img/logo.png);
background-size: cover;
width: 800px;
height: 400px;
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@bubn0ff
it-шник
img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы