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

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

Комментарии: 1

Александр Мальцев
Александр Мальцев
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"); }
}