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

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

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

Всего 2 ответа


Лично из предпочтений, если изображение не соответствует размерам баннера, я бы установил его в качестве 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>

Если вы хотите задать дополнительные медиа-запросы и работаете с мобильным первым дизайном с <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 */
}

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

.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">

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

В качестве альтернативы вы можете использовать <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, медиа-запросы и ссылки на фоновые изображения могут включиться, поэтому они в основном загружаются быстрее. Тем не менее, это обоснованный факт, что перенос ответственности из CSS в HTML из-за проблем с производительностью противоречит разделению задач, но я позволю вам судить об этом.

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


Есть идеи?

10000