Question

我需要一个响应式背景图像，当在其容器中调整大小时可以缩放并保持其宽高比，任何人都有任何建议。这就是我工作了3天，一切都很好但容器占用了很多空间，如果我弄乱了高度，它会弄乱纵横比。

HTML：

<div class="wrapper">
    <h2 class="heading">Responsive Background CSS</h2>

    <div class="container"> 
        <a href="#" class="image">Background Image Applied Here</a>
    </div>

    <section class="about"></section>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

.cf:before, .cf:after, {
    display: table;
    content:"";
}

.cf:after {
    clear: both;
}

.heading {
    color: #000;
    font-size: 40px;
    text-align: center;
}

.container {
    position: relative;
    min-height:1px;
    padding: 0;
    max-width: 80%;
    background-color:orange;
    margin: 30px auto;
}

.image {
    background:url(img/image%201.jpg);
    display: block;
    max-width: 100%;
    padding-bottom: 177.7777777777778%;
    height: 0;
    background-size: 100% !important;
    background-repeat: no-repeat;
}

.about {
    width:100%;
    min-height: 500px;
    background-color:tomato;
    position: relative;
}

Answer 1

您可以尝试为responsive images（background）

制作此自定义插件

http://webonise.github.io/jQuery-plugins/fullScreenImage/responsive-full-screen.html

Answer 2

您可以随时根据屏幕尺寸更改图像。你想要使用相同的图像，只是不同的大小。这样，您可以通过更好地显示背景图像意图的方式裁剪图像。

Here's a demo。更改浏览器大小以查看更改。

如何修复响应式背景图像？

2 个答案: