Question

我正在制作全屏背景幻灯片。

我的问题是：如何设置图像以占据整个屏幕并保持纵横比？

最小高度和最小宽度工作，但两者都设置时不保持纵横比。我想要使用容器的完整覆盖率裁剪图像。

Diagram of Problem

我相信我需要修复一个维度，而另一个维护需要自动化;鉴于图像尺寸和视口尺寸是可变的，我认为我需要至少2套CSS规则，并且javascript来计算应该使用哪一个。有更简单的方法吗？

我已经绘制了一张说明我问题的图表。深色是原始图像。中值颜色是期望的效果。较浅的颜色是放大图像所需的溢出。

我正在研究Ken-Burns效果全屏幕背景。我知道我必须担心过渡，但我希望我能在之后处理。

Ken Burns效果教程：
http://cssmojo.com/ken-burns-effect/

解决：感谢Maju向我介绍背景封面。将图像更改为div并将Ken Burns代码上的javascript + css从图像更改为div工作得很好。脚本会更改元素类，因此您必须以其他方式使用Maju的CSS或更改脚本。

Answer 1

如果您将在css background-image中使用图像，则可以在任何元素背景大小上进行设置。如果我理解你的话，你需要这样的东西：

.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>

封面会影响图像的方式，它始终以正确的宽高比覆盖整个元素。

还有新的CSS样式，但它在IE / ME中不起作用。

https://css-tricks.com/almanac/properties/o/object-fit/

因此我建议使用带背景图像的div。

保持纵横比100％宽度＆amp;高度（CSS中的裁剪溢出）

1 个答案: