html - 背景图像在移动设备中未缩放

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

话虽如此，如果你真的真的需要使用反向拉伸(stretch)来设置背景图片，你可以在初始化后覆盖内联 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>

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