Точный размер изображения баннера для мобильного адаптивного для другого устройства

Question

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

Answer 1

1. Ширина:

.banner
{
    max-width: 100%;
    height: auto;
}

Медиа-запрос:

    @media only screen and (min-width: 960px) {
        .banner
        {
          width: 960px
          height: auto;
        }
    @media only screen and (min-width: 1440px) {
        .banner
        {
          width: 1440px
          height: auto;
        }
    }
    @media only screen and (min-width: 2000px) {
        .banner
        {
          width: 2000px
          height: auto;
        }
    }
    @media only screen and (max-device-width: 480px) {
       .banner
        {
          width: 480px
          height: auto;
        }
    }
    @media only screen and (device-width: 768px) {
       .banner
        {
          width: 768px
          height: auto;
        }
    }

Answer 2

Это также зависит от вашего изображения, занимает ли основное содержимое вашего изображения все пространство? Есть ли что-нибудь, что вы можете вырезать? в этом случае вы можете добиться этого с помощью подгонки объекта, расположения объекта, при этом ширина и высота не будут сильно меняться. Если вы можете изменить изображение самостоятельно, используйте свойство img srcset, где вы указываете, какое изображение должно отображаться в разных точках разрешения. Если ни один из предыдущих вариантов не подходит вам, попробуйте vmax, вам будет интересно угадать правильные меры, но как только это будет сделано, вам не понадобится слишком много медиазапросов Наконец, есть утомительный способ настройки различных медиазапросов.

Answer 3

Вы можете использовать bootstrap framework. добавить img-отзывчивый класс к изображению

<img src="1.jpg" class="img-responsive" alt="image" >