提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文繁体 英文版本 中英对照 版本，有任何建议请联系yoyou2525@163.com。
我的网站有问题。 我希望背景图像能在移动设备上完全缩放，以便我可以在手机上看到整个图像，而不仅仅是一部分。
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
提前致谢
因此，您有两种选择，但是首先需要了解一些限制：
图像要么是屏幕的宽度（可能比您想要的要短得多），要么是容器的高度（并且比屏幕要宽得多）。
为了获得第一个结果（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根据屏幕大小来操纵/更改图像外，没有比这更多的控制了。
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.