Question

我的网站有问题。我希望背景图像能在移动设备上完全缩放，以便我能在手机上看到整个图像，而不仅仅是一部分。

HTML：

<div data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1"class="sl-slide">
    <div style="background-image: url(images/slide/3.jpg);"class="sl-slide-inner">
        <div class="slide-container">
            <div class="slide-content text-center">
                <h2 class="main-title"><span class="text-primary">Tractari auto intern & international</span></h2>
                <blockquote>
                    <p ></p>
                    <p style="margin-top: 0px"></p>
                </blockquote>
            </div>
        </div>
    </div>
</div>

CSS

.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner {
background-repeat: no-repeat;
background-size: contain;
background-position:center;
}

我想在手机上看到它，完整图片：

https://gyazo.com/4b3726e24444038f2e6ff824a9f3ec45

不是这个

https://gyazo.com/f263a347517120a0ad368b7bbd2840ae

预先感谢

Answer 1

因此，您有两种选择，但是首先需要了解一些限制：

图像要么是屏幕的宽度（可能比您想要的短得多），要么是容器的高度（并且比屏幕要宽得多）。

为了获得第一个结果（宽度100％，任何高度）：

.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position:center;
}

然后为了获得第二个（这就是您已经得到的）：

    .demo-1 .sl-slide .sl-slide-inner,
    .demo-2 .sl-slide .sl-slide-inner {
        background-repeat: no-repeat;
        background-size: contain OR [auto 100%];
        background-position:center;
    }

但是，除了使用javascript根据屏幕大小来操纵/更改图像外，没有比这更多的控制权了。

img不适用于移动设备

1 个答案: