#html #image #responsive
#HTML #изображение #отзывчивый
Вопрос:
Я пытаюсь загрузить свои изображения с изменяемыми размерами, используя HTML srcset и размеры, но браузер по-прежнему загружает только увеличенное изображение.
Мой HTML выглядит так:
<img
srcset="/logo-146x30.jpg 146w, /logo-122x25.jpg 122w, /logo-97x20.jpg 97w"
sizes="(min-width: 651px) 146px, (min-width: 361px) 121px, 97px"
src="/logo-146x30.jpg"
alt="alt text"
/>
Я также пытаюсь выполнить противоположные медиа-запросы, такие как:
<img
srcset="/logo-146x30.jpg 146w, /logo-122x25.jpg 122w, /logo-97x20.jpg 97w"
sizes="(max-width: 360px) 97px, (max-width: 650px) 121px, 146px"
src="/logo-146x30.jpg"
alt="alt text"
/>
В обоих случаях я всегда получаю изображение /logo-146x30.jpg
.
Я попытался повторно загрузить браузер в уменьшенном размере, но в любом случае единственным загруженным изображением является /logo-146x30.jpg
.
Также мета окна просмотра похожа на это:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"
>
Вы видите что-нибудь неправильное в том, что я сделал до сих пор?
Ответ №1:
Вместо того, чтобы использовать srcset и размеры, используйте медиа-запросы CSS. Это из верхней части моего разума, но попробуйте что-нибудь вроде (это основано на вашем первом изображении):
HTML:
<div class="image" />
CSS:
@media screen and (min-width: 651px) {
.image {
background-image: url(/logo-146x30.jpg);
}
}
@media screen and (min-width: 361px) and (max-width: 650px) {
.image {
background-image: url(/logo-122x25.jpg);
}
}
Не забудьте использовать минимальную ширину и максимальную ширину в @media, чтобы они не были переопределены.
Попробуйте также использовать min-width и max-width в вашем решении.
Комментарии:
1. Прежде всего, спасибо за ваш ответ. Во-вторых, это не я проголосовал против вас 🙂 Наконец, предлагаемое вами решение неприменимо к моему случаю. Мне нужно иметь тег для чтения <img>, а не записывать изображение с помощью CSS. 🙂