Адаптивное изображение для мобильного - PullRequest
Новая
       7

Адаптивное изображение для мобильного

0 голосов
/ 16 января 2020

Могу ли я поставить медиа-запросы для изображения, как это. Я имею в виду, что это работает, но мне интересно, выглядит ли это абсурдно. Потому что мое изображение выглядит таким маленьким в мобильном телефоне. Также vh не работает. 

 .banner {
    max-width: 100%;
    min-height: 185px;
    max-height: 270px;
  }

Ответы [ 2 ]

1 голос
/ 16 января 2020

Не абсурдно, но если вы не получаете желаемого эффекта, это неправильно. Есть много способов реализовать свой баннер, самый простой (я бы подумал): 

.banner {
    width: 100%;
    height: 185px; {/* or whatever */}
    object-fit: cover;
}

Или добавление его в качестве фонового изображения и использование «background-size: cover», как предложено Оливер.

Другой возможностью было бы добавить их в качестве фоновых изображений и использовать медиазапросы для загрузки различных изображений. Это позволит вам загружать изображения, которые лучше соответствуют размеру экрана и плотности пикселей (художественное направление), и вы получите лучшее качество в обмен на дополнительную работу. Например: 

@media (min-width: 35rem) and (min-resolution: 192dpi) {
    .banner {
        background-image: url('foo.bar');
    }
}

Лично я считаю, что медиа-запросы хороши , когда они вам нужны . Если вы можете выполнять работу с относительными единицами, вы избегаете разбрасываться вокруг кусочков css, которые были бы более удобны для сопровождения.

Теперь я должен сказать, что крутые дети используют другой прием: адаптивные изображения. Приведенные ниже примеры взяты из статьи MDN. В вас html вы можете добавлять различные источники изображения с помощью атрибутов «scrset» и «sizes»: 

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

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

Кроме того, вы можете использовать тег <picture> с разными источниками, что позволяет использовать медиа, которые лучше всего подходит для пользовательского устройства. Например: 

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

Эти методы адаптивного изображения существуют, потому что изображения в html предварительно загружаются до того, как ваши css, медиа-запросы и URL-адреса фоновых изображений могут срабатывать, поэтому они в основном загружаются быстрее. Тем не менее, это обоснованный факт, что перенос ответственности из CSS в HTML из-за проблем с производительностью противоречит разделению задач, но я позволю вам судить об этом.

И, наконец, о "VH" не работает ... это, безусловно, делает. Но мы не сможем помочь без лучшего описания проблемы.

1 голос
/ 16 января 2020

Лично из предпочтений, если изображение не соответствует размерам баннера, я бы установил его от background-image до <div>. Таким образом, вы можете установить его так, чтобы он покрывал область и центрировать ее, вы потеряете области изображения, но в то же время он всегда будет покрывать область и работать быстро. 

.banner {
    width: 100%;
    /* can also set to 100vw if you wish */
    /* specify height - this is a personal favourite of mine at times */
    height: calc(100vh - 185px);
    /* if you wish to keep max-height */
    max-height: 270px;

    background-image: url('[insert route to image file]');
    background-size: cover;
    background-position: center center;
}

Измененная разметка, если он вам нужен 

<div class="banner">
  <!-- insert any child elements if needed -->
</div>

Если вы хотите sh установить дальнейшие медиа-запросы и работаете с мобильным первым дизайном с <meta name="viewport" content="width=device-width, initial-scale=1">, установленным в <head>, используйте их так

планшетный медиазапрос 

@media screen and (min-width: 768px) {
/* Set new styles here */
}

настольный медиазапрос 

@media screen and (min-width: 1024px) {
 /* Set new styles here */
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...