CSS-Banner 调整：比例

Question

我将使用全屏横幅，只是like this one 或this other one，为此我在Wordpress 网站中使用了一个插件。

现在我已将它们各自的宽度设置为 100%（以避免 x 轴滚动并使横幅完全显示在每个屏幕尺寸上）。问题是，如果您将浏览器屏幕缩小或在小屏幕（13 英寸或 iPad）上打开网站，横幅上显示的图像会被挤压。

I need the image to be cutted off while resizing 而我知道的唯一方法是将横幅的 div 类从 width: 100% 更改为 width:the amount of pixels I want 但显然，如果您输入的屏幕该站点较小，您将获得 x 轴滚动，如果站点较大，您将在达到之前设置的像素宽度时切断横幅。

我怎样才能让图像不被挤压，而是被切断，使其 div 宽度在任何浏览器上显示为 100%？

Banner 的实际代码：

.bannercustom { 
   position: relative;
   z-index: 11;
   left: -2px;
   width: 100%;
   top: 0px;
   float: left;
   height: 440px;
}

Answer 1

您是否可以将横幅设置为 div 的背景图像？然后您可以将 background-scale 设置为 100% 并让 div 根据需要调整大小。

Answer 2

为什么不直接使用：width:auto;？

应该可以。