时间戳

首页 > 解决方案 > 你如何用窗口调整背景图像的大小

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

问题描述

我正在开发我妻子的商业网站。每个页面的菜单栏下方都有一个背景图像。请参阅 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;
}

标签： cssbackgroundbackground-image

解决方案

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

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

推荐阅读