背景图像在移动设备中不缩放

Question

您好，我正在尝试缩小在特定 div 中设置的背景图像，以缩小 iPhone 或 android 等移动屏幕，但它没有缩小，而是仅显示大图像的特定部分，而我想要那个整张图片变小，可读性更好

这里是在线链接，您可以在其中验证和查看样式

http://houseofskills.pk/house-of-skills/website/index

<section id="intro">
            <div class="black-overlay"></div>
            <div class="container valign">
                <div class="row">
                    <div class="col-md-12">

                    </div>

                    <div class="col-md-12 text-center">

                    </div>

                    <div style="font-weight: bold; color:black;" class="col-md-6 col-md-offset-3 text-center">

                    </div>

                </div>
            </div>
        </section>

<style>
.valign{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.container {
    position: relative;
}
</style>

我也在使用 backstrech 来设置背景图片

    <script>
            $("#intro").backstretch("<?php echo base_url('assets/img/banner.jpg');?>");
        </script>

Answer 1

Backstretch 正在设置内联样式，强制您的图像始终以最大宽度显示。

使用像 Backstretch 这样的 Jquery 插件来设置背景图像是完全没有必要的。像这样在 CSS 中设置背景图像会更加高效和简洁：

HTML：

<section id="intro">
    <div class="black-overlay"></div>
    <div class="bg"></div>
    ...
</section>

CSS：

...
#intro > .bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url( '/house-of-skills/assets/img/banner.jpg' );
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
...

话虽如此，如果你真的需要使用 backstretch 来设置背景图片，你可以在初始化后覆盖内联 CSS：

<script>
    $("#intro").backstretch("<?php echo base_url('assets/img/banner.jpg');?>");
    $("#intro > .backstretch img").css( {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        width: '100%',
        height: 'auto',
        margin: 'auto'
    } )
</script>

这利用了后伸使用绝对定位这一事实。它将所有边缘参数设置为 0，然后给出auto 的边距，这将使绝对元素水平和垂直居中。同样，这是一种非常低效的设置背景图像的方法。