html - img 不适合移动设备
问题描述
我的网站有问题。我希望背景图像在移动设备上重新缩放,这样我就可以在我的手机上看到完整的图像,而不仅仅是它的一部分。
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
,没有比这更多的控制了。
推荐阅读
- laravel - 在 laravel 的 cron 作业调度程序中运行 phpunit 的测试
- gerrit - 我可以在 Gerrit 中查看分支的最终状态吗?
- c - cmake灯丝渲染项目时出错
- wpf - 从样式中将项目添加到集合
- google-cloud-platform - 需要 iam.serviceAccounts.getIamPolicy 才能对服务帐户执行此操作
- angular - 如何从以下服务获取数据?
- php - Tinker 在 Laravel 5.8 中给出异常
- java - 带有巨大 BufferdImage 的小型 pdf 文件结果
- python - 如何在 Keras 中使用 deconv2d 获得与原始输入大小相同的层?
- javascript - 我可以一次跟踪输入字段的文本更改,而不是每次输入吗?