用于更改图像的媒体查询

Question

我正在使用media queries 设计一个可在台式机和移动设备上运行的网站。在大多数情况下，这工作正常。但是，我有一个场景，我将在下面尝试描述，它不能正常工作。

在桌面上，我有一系列带有文本覆盖的图像，排列如下：

在移动设备上，我希望它显示在两列中，最后一个图块分布在整个宽度上，如下所示：

但是，我用于桌面上最后一个图块的图像是方形的，当我将它铺满整个宽度时，它太大了，看起来更像这样：

下面是我目前拥有的 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 开发课程中学到的东西。

Answer 1

您可以简单地放置一个矩形图像并将其隐藏在移动设备上方的屏幕上，大多数人使用的常见媒体查询断点是引导方式：移动设备为 0 到 768px，平板电脑和类似设备为 768px 到 992px，992px 到 1200px适用于中型屏幕，1200 像素以上适用于 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：还要确保在您的 head 标签中有视口元数据：

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

Answer 2

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