Question

导致此问题的

Here are the full width banners。我使用插件，您可以上传某个图像并使用特定ID进行设置。所以我上传了一个宽度为2000px，高度为600px的jpeg。然后我分配了以下CSS：

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

}

横幅在全屏幕上看起来不错，但是在向下缩放浏览器宽度时它们会挤压。 因此，我希望在缩小浏览器大小的同时防止缩小效果并剪切图像。我如何实现这一目标？

Answer 1

看起来你的媒体查询宽度为140px！important。

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

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

Answer 2

我玩了一段时间，但最终根据您的需要提出了两种解决方案。第一种更容易实现，更准确地满足您的要求。

从bannerHome元素中删除图像，并将以下代码添加到CSS中。

.bannerHome {
    background-image: url('http://www.gonpires.com/carmacks/wp-content/uploads/useful_banner_manager_banners/6-homeJV.jpg');
    background-position: center center;
    background-size: cover;
    height: 890px
}

http://jsfiddle.net/9sqjs/2/

该方法仅适用于IE9 +，Firefox Chrome等。如果您不需要IE8支持，那么很好的解决方案。您还必须调整媒体查询。另一种方法需要更多的工作，并且不会裁剪边，但它会适合并调整100％宽度容器内的图像，这将是跨浏览器。

http://jsfiddle.net/Q64S2/1/

Answer 3

您是否尝试过将图片改为背景图片？对于.useful_banner_manager_banner分类div，您可以设置大背景图像，以便它基本上根据屏幕大小自行裁剪。

CSS：当我缩小浏览器时，横幅会缩小

3 个答案: