html - 用于更改图像的媒体查询

Question

我正在设计一个可在桌面和移动设备上运行的网站，使用 media queries 。在大多数情况下，这工作得很好。但是，我将尝试在下面描述一个场景，该场景无法正常工作。

在桌面上，我有一系列带有文本叠加的图像，排列如下:

在移动设备上，我希望将其显示在两列中，最终的图 block 分布在整个宽度上，如下所示:

但是，我用于桌面上最终图 block 的图像是方形的，当我将其展开到整个宽度时，它太大了，看起来更像是这样:

下面是我目前拥有的 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;
    }
}

我不想强制图像达到一定的高度，因为这会扭曲它，所以我想我可以有第二个图像，它是矩形的，我可以在移动设备上切换。但是，我无法像使用传统媒体查询那样根据设备选择不同的图片。

[编辑:我知道可以在页面上同时显示两个图像并通过媒体查询隐藏其中一个图像，但有人警告说，如果过度使用，这可能会减慢页面速度，因为所有设备都必须加载所有图像。我正在寻找一种“更好”的方法来做到这一点，以避免在小规模学习时养成坏习惯]

有人可以帮助我，或者给我指出一个简单的在线解释，可以帮助我解决这个问题。

---

附注我对网络开发非常陌生，所以请让你的答案对初学者友好，如果我需要澄清，请耐心等待。我也乐于接受更好或更简单的做事方式的建议，我正在利用从 Codecademy 的 Web 开发类(class)中学到的知识。

Answer 1

您可以尝试使用clip property in 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"/>