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>

我也正在使用仰泳设置背景图像

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

Answer 1

反向拉伸设置了内联样式，这些样式强制图像始终显示为最大宽度。

使用诸如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之后覆盖内联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的边距，它将在水平和垂直方向上将绝对元素居中。同样，这是设置背景图像的一种非常低效的方法。

背景图片在移动设备中无法缩放

1 个答案: