Макет резиновый и изображение растягиваются на всю ширину, и по этому качество и вид изображение ухудшается, в таких случаях как правильно сверстать изображение и как сделать его высоту ??
Если статья понравилась, то поделитесь ей в социальных сетях:
Комментарии:
Александр Мальцев
12.06.2016, 06:07
Можно подготовить различные изображения для разных разрешений экрана и показывать только те, которые соотвествуют экрану.
/* экран по умолчанию (не с высокой плотностью пикселей) */
.img #game1 { background-image: url("img/imgae10.jpg"); }
@media (max-width: 320px) {
/* маленький экран (не с высокой плотностью пикселей) */
.img #game1 { background-image: url("img/image10s.jpg"); }
}
@media (min-resolution: 2dppx) and (max-width: 320px) {
/* маленький экран (с высокой плотностью пикселей) */
.img #game1 { background-image: url("img/image10s@2x.jpg"); }
}
@media (min-width: 321px) and (max-width: 538px) {
/* средний экран (не с высокой плотностью пикселей) */
.img #game1 { background-image: url("img/image10m"); }
}
@media (min-resolution: 2dppx) and (min-width: 321px) and (max-width: 538px) {
/* средний экран (с высокой плотностью пикселей) */
.img #game1 { background-image: url("img/image10m@2x.jpg"); }
}
@media (min-resolution: 2dppx) and (min-width: 539px) {
/* большой экран (с высокой плотностью пикселей) */
.img #game1 { background-image: url("img/image10l@2x.jpg"); }
}
Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.
Комментарии: