Question

我正在妻子的商业网站上工作。每页菜单栏正下方都有一个背景图像。请参阅invisionbilling.com/stackoverflow以获取我要使用的图片（在背景图片下方）。我希望此图像能够调整大小，同时始终保持相同的比例以响应。我目前有一些可以正常工作的东西，但是我无法达到正确的高度。它会切断桌面视图上的图片，但是当我缩小窗口时，它会开始更正确地显示。但是，一旦您达到某个窗口大小，它就会停止调整，而只是开始切掉图像的右侧。如何获得适当调整的高度，并一直将其向下调整至响应状态而不会中断。感谢您的帮助！

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

如果您仅将面包屑区域切换为具有背景大小：包含，并设置background-repeat：no-repeat，就可以了。

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

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

1 个答案: