У моего сайта есть изображения героев полной ширины. В настоящее время служили в качестве фонового изображения CSS с одним URL-адресом изображения шириной 2000px. Загрузка одного или нескольких из этих изображений на небольшое устройство определенно является неоптимальной. Я хотел бы обслуживать изображение 2000PX, изображение 1440PX, изображение 992PX и т. Д., Чтобы улучшить время загрузки страницы на мобильных устройствах. С другой стороны, я мог бы обслуживать разные изображения с помощью медиа -запроса, но это усложняется быстро, если вы хотите обслуживать изображения на основе просмотра, и если устройство составляет 2 раза или 3 раза. Или вместо этого я мог бы переключиться на метку IMG и использовать SRCSET, но я не смог найти решение, чтобы получить полную ширину, которое масштабируется как вверх, так и вниз и заполняет фиксированную высоту. Кажется, что это должно быть возможно с помощью объекта: обложка, но без сочетания максимальной ширины, высоты, максимума и т. Д. Я пробовал. class = "Snippet-Code-CSS Lang-CSS PrettyPrint-override">
Код: Выделить всё
.hero {
display: block;
min-height: 80px;
width: 100%;
float: left;
position: relative;
padding: 0;
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
background-image: url("https://place-hold.it/500x100");
}< /code>
Это на WordPress с начальной загрузкой.
Подробнее здесь:
https://stackoverflow.com/questions/660 ... or-otherwi
Мобильная версия