Медиа-запросы для изменения изображения

Question

Я разрабатываю веб-сайт, который работает на настольных компьютерах и мобильных устройствах, используя медиа-запросы . По большей части это работает нормально. Однако у меня есть сценарий, который я постараюсь описать ниже, который не работает должным образом.

На рабочем столе у ​​меня есть серия изображений с наложением текста, расположенная так:

На мобильном устройстве мне бы хотелось, чтобы это отображалось в двух столбцах, а окончательная плитка распределялась по всей ширине, как показано ниже:

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

Ниже приведены HTML и CSS, которые у меня есть на данный момент:

<div>
    <div class="hotel_container">
        <div class="options">
            <div class="option">
                <a href="www.example.com" target="_blank"><img class="opt_img" src="images/example.jpg"></a>
                <h3 class="centered" id="hotel_info">TEXT</h3>
            </div>
        </div>
        <!-- repeated "options" div 7 more times -->
        <div class="options_last">
            <div class="option">
                <a href="www.example.com" target="_blank"><img class="opt_img" src="images/example2.jpg"></a>
                <h3 class="centered" id="hotel_info">TEXT</h3>
            </div>
        </div>
    </div>  
</div>

CSS

.options, .options_last{
    width: 33%;
    overflow: hidden;
    display: inline-block;
}

@media only screen and (max-width: 812px) {
    .options{
        width: 50%;
    }
}

@media only screen and (max-width: 812px) {
    .options_last{
        width: 100%;
    }
}

.option{
    position: relative;
    text-align: center;
    padding: 10px;
}

@media only screen and (max-width: 812px) {
    .option{
        padding: 1px;
    }
}

.opt_img{
    width: 100%;
    opacity: 0.7;
}

.opt_img:hover{
    opacity: 0.9;
}

.centered {
    position: absolute;
    width: 100%;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#hotel_info{
    background-color: rgba(130, 130, 130,0.7);
    width: 80%;
    font-size: 23px;
    padding: 15px;
}

@media only screen and (max-width: 812px) {
    #hotel_info{
        width: 60%;
        font-size: 10px;
        padding: 5px;
    }
}

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

[Редактировать: мне известна возможность иметь оба изображения на странице и скрывать одно или другое с помощью медиазапросов, но меня предупреждали, что это может замедлить работу страниц при чрезмерном использовании, поскольку все устройства должны загружать все изображения. Я ищу «лучший» способ сделать это, чтобы избежать появления вредных привычек, пока я учусь чему-то мелкому]

Может ли кто-нибудь помочь мне или указать на простое объяснение в Интернете, которое может помочь мне разобраться, пожалуйста.

---

P.S. Я очень новичок в веб-разработке, поэтому, пожалуйста, сделайте ваши ответы дружелюбными для новичков, и держите меня, если мне нужно попросить разъяснений. Я также открыт для предложений о лучших или более простых способах ведения дел, я работаю с тем, что я узнал из курсов Codecademy по веб-разработке.

Answer 1

Вы можете попробовать использовать свойство clip в CSS .

.clippable {
    position: absolute;
    clip: rect(0px,250px,100px,0px);
}

.flex-flow {
  align-self: auto;
  
}

.flow-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 250px;
  justify-content: space-between;
}

<div class="flow-box">
  <img src="https://pbs.twimg.com/profile_images/883859744498176000/pjEHfbdn_400x400.jpg" width="100" height="100" class="flex-flow"/>
  <img src="https://pbs.twimg.com/profile_images/883859744498176000/pjEHfbdn_400x400.jpg" width="100" height="100" class="flex-flow"/>
  <img src="https://pbs.twimg.com/profile_images/883859744498176000/pjEHfbdn_400x400.jpg" width="100" height="100" class="flex-flow"/>
  <img src="https://pbs.twimg.com/profile_images/883859744498176000/pjEHfbdn_400x400.jpg" width="100" height="100" class="flex-flow"/>
</div>

  <img src="https://pbs.twimg.com/profile_images/883859744498176000/pjEHfbdn_400x400.jpg" width="250" height="250" class="clippable"/>

Answer 2

Вы можете просто поместить прямоугольное изображение и скрыть его на экранах выше мобильных, обычные точки прерывания медиа-запросов, которые большинство людей используют, - это метод начальной загрузки: от 0 до 768 пикселей для мобильных устройств, от 768 до 992 пикселей для планшетов и аналогичных устройств, от 992 до 1200 пикселей для средних экранов и выше 1200px для больших экранов, таких как Apple Retina и 4K.

В этой ситуации вы можете добавить класс, такой как .show-sm и .hidden-sm, и использовать его для своих целей:

Пример отображения элемента только на мобильном телефоне:

@media screen and (max-width: 768px) {
    .hidden-sm {
        display: none !important; // use important to override other styles
    }
    .show-sm {
        display: block !important; // use important to override other styles
    }
}

Пример отображения элемента для указанного выше мобильного разрешения:

@media screen and (min-width: 768px) {
    .hidden-sm {
        display: block !important; // use important to override other styles
    }
    .show-sm {
        display: none !important; // use important to override other styles
    }
}

И добавьте эти классы к элементам, которые вы хотите показать и скрыть на мобильных устройствах и компьютерах, например:

<div>
    <div class="hotel_container">
        <!-- show this element just on desktop -->
        <div class="options hidden-sm">
            <div class="option">
                <a href="www.example.com" target="_blank"><img class="opt_img" src="images/example.jpg"></a>
                <h3 class="centered" id="hotel_info">TEXT</h3>
            </div>
        </div>

        <!-- show this element just on mobile -->
        <div class="options_last show-sm">
            <div class="option">
                <a href="www.example.com" target="_blank"><img class="opt_img" src="images/example2.jpg"></a>
                <h3 class="centered" id="hotel_info">TEXT</h3>
            </div>
        </div>
    </div>  
</div>

И, наконец, что не менее важно, вы можете использовать медиазапросы для применения стилей между двумя разрешениями, например:

@media screen and (min-width: 768px) and (max-width: 992px) {
    .hidden-md {
        display: none !important; // use important to override other styles
    }
}

Как видите, его медиазапрос работает между 768px и 992px и скрывает элемент с объявленным классом. Надеюсь, это поможет.

PS: Вы можете объявить свои собственные медиа-запросы, с вашими собственными разрешениями, как ваши потребности и без ограничений.

PS 2: Также убедитесь, что в заголовке тега есть мета области просмотра:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">