媒体查询更改图像

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网络开发课程中学到的知识。

Answer 1

您可以简单地将矩形图像隐藏在屏幕上方而不是移动，大多数人使用的常见媒体查询断点是自举方式：移动设备为0到768px，平板电脑和类似设备为768px到992px，中等屏幕为992px到1200px适用于Apple视网膜和4K等大屏幕的1200px以上。

在这种情况下，您可以添加类似.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标签中有viewport meta：

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