html - CSS:当我缩小浏览器时，横幅会被压扁

Question

Here are the full width banners这导致了这个问题。我正在使用一个插件，它使您可以上传特定图像并使用特定 ID 进行设置。所以我上传了一个 2000px 宽度和 600px 高度的 jpeg。然后我分配了以下 CSS:

 #bannerPages {
 height: 296px;
 margin-top: 183px;
 width: 100%;

横幅在全屏上看起来不错，但在缩小浏览器宽度时它们会被压扁。 所以我想防止压缩效果并在缩小浏览器大小的同时剪切图像。我如何实现这一点？

Answer 1

看起来您的媒体查询使宽度为 140 像素!很重要。

尝试将媒体查询上的 img 更改为此

 img {
 width: 100%;
 height: auto;
 }