css - 您如何使用窗口调整背景图像的大小

Question

我正在为我妻子的商业网站工作。每个页面的菜单栏下方都有一个背景图像。请访问 invisionbilling.com/stackoverflow 查看我想要使用的图片(它位于背景图片下方)。我希望此图像调整大小，同时保持相同的比例一直到响应。我目前有一些东西可以正常工作，但我无法获得正确的高度。它切断了桌面 View 上的图片，但当我缩小窗口时，它开始更正确地进入 View 。但是，一旦达到某个窗口大小，它就会停止调整，并开始切断图像的右侧。我如何才能正确调整高度，并在不切断的情况下将其一直调整到响应速度。感谢您的帮助!

CSS

.breadcrumb_area {
background: url("http://invisionbilling.com/wp- 
content/uploads/2018/07/Background-Photo-Updated.jpg");
box-shadow: 0 0 5px rgba(51, 51, 51, 0.1) inset;
border-bottom: 1px solid #e8e8e8;
padding: 60px 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 1

如果您只是将面包屑区域切换为具有背景大小:包含，并设置背景重复:不重复，您应该没问题。

.breadcrumb_area {
    background-image: url(http://invisionbilling.com/wp-content/uploads/2018/06/Vision-V5.jpg);
    box-shadow: 0 0 5px rgba(51, 51, 51, 0.1) inset;
    border-bottom: 1px solid #e8e8e8;
    padding: 60px 0;
    width: 100%;
    height: 295px;
    background-size: contain;
    background-repeat: no-repeat;
}