html - CSS-Banner 调整 : Scale

Question

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

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

我需要在调整大小时切断图像，我知道的唯一方法是更改横幅的 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 根据需要调整大小。