Как правильно сверстать изображение в белом фоне ?

Askar

12.06.2016

547

Макет резиновый и изображение растягиваются на всю ширину, и по этому качество и вид изображение ухудшается, в таких случаях как правильно сверстать изображение и как сделать его высоту ??

Если статья понравилась, то поделитесь ей в социальных сетях:

Комментарии ()

Александр Мальцев

12 июня 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"); }
}

Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.