我可以对这样的图像进行媒体查询吗？我的意思是它有效，但我想知道它是否看起来很荒谬。 因为我的图像在移动设备中看起来很小。 vh 也不起作用。
.banner {
max-width: 100%;
min-height: 185px;
max-height: 270px;
}
【问题讨论】：
Also vh didnt work 什么没用？你对结果有什么期望？
标签： css sass bootstrap-4
如果图像不是横幅的正确尺寸，我个人出于偏好，我会将其设置为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;
}
或者将其添加为背景图片并使用 Oliver 提出的“background-size:cover”。
另一种可能性是将它们添加为背景图像并使用媒体查询来加载不同的图像。这将允许您加载更好的图像fit the screen size 和pixel density（艺术指导），并且您将获得更好的质量以换取额外的工作。例如：
@media (min-width: 35rem) and (min-resolution: 192dpi) {
.banner {
background-image: url('foo.bar');
}
}
就我个人而言，我认为媒体查询非常棒当你需要它们时。如果您可以使用相对单位来完成这项工作，您就可以避免散布在 CSS 中更易于维护的部分。
现在我必须说酷孩子使用了另一个技巧：响应式图像。以下示例来自the MDN article. 在您的 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、媒体查询和背景图像 url 可以启动之前预加载的，因此它们基本上加载得更快。不过，由于性能问题而将责任从 CSS 转移到 HTML 是有道理的，这违背了关注点分离，但我会让你来判断这一点。
最后，关于“vh”不起作用……它肯定会起作用。但是如果没有更好地描述问题，我们将无法提供帮助。
【讨论】：