如何使用 window 调整背景图片的大小

Question

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

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

如果您只是将面包屑区域切换为背景 size:contain，并设置背景重复：不重复，应该没问题。

.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;
}

如何使用 window 调整背景图片的大小

How do you resize background image with window

css

background

background-image