我正在全屏背景幻灯片播放。
我的问题是：如何设置图像以全屏显示并保持宽高比？
最小高度和最小宽度可以工作，但是同时设置两者时不保持纵横比。我想要裁剪图像以覆盖整个容器。
我相信我需要固定一个尺寸，而另一个尺寸要自动设置。考虑到图像尺寸和视口尺寸是可变的，我想我至少需要2套CSS规则和javascript来计算应该使用哪一个。有没有更简单的方法可以做到这一点？
我已绘制出说明我的问题的图表。深色是原始图像。中间颜色是所需的效果。较浅的颜色是放大图像中所需的溢出。
我正在研究Ken-Burns效果的全屏背景。我知道我必须担心过渡，但是我希望以后能解决这个问题。
Ken Burns效果教程：http :
//cssmojo.com/ken-burns-effect/
解决：感谢Maju向我介绍背景封面。将图像更改为div并将Ken Burns代码上的javascript + css从图像更改为div效果很好。该脚本更改了元素类，因此您必须以其他方式使用Maju的CSS或更改脚本。
如果要在CSS背景图像中使用图像，则可以在任何元素上设置background-size。如果我理解正确，则您需要以下内容：
.background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-repeat: no-repeat !important;
background-position: 0 0 !important;
background-attachment: fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}<div class="background" style="background-image: url(http://www.jurosko.cz/images/stackoverflow.png)"></div>Cover将始终以正确的宽高比覆盖整个元素，从而影响图像。
还有新的CSS样式，但是在IE / ME中不起作用。
https://css-tricks.com/almanac/properties/o/object-fit/
因此，我建议将div与背景图像一起使用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句