保持 100% 宽度和高度的纵横比（CSS 中的裁剪溢出）

Question

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

我的问题是：如何设置图片占满屏幕并保持宽高比？

Min-height 和 min-width 有效，但当两者都设置时不要保持纵横比。我想要裁剪后的图像完全覆盖容器。

Diagram of Problem

我想我需要固定一个维度，另一个自动；考虑到图像尺寸和视口尺寸是可变的，我想我至少需要 2 套 CSS 规则，以及 javascript 来计算应该使用哪一套。有更简单的方法吗？

我画了一张图来说明我的问题。深色是原始图像。中值颜色是所需的效果。较浅的颜色是放大图像中所需的溢出。

我正在制作 Ken-Burns 效果全屏背景。我知道我必须担心转换，但我希望我能在之后处理它。

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

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

Answer 1

如果您将使用 css background-image 中的图像，您可以在任何元素上设置 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/Whosebug.png)"></div>

封面会影响图像，因为它总是以正确的纵横比覆盖整个元素。

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

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

出于这个原因，我建议使用带有背景图像的 div。

保持 100% 宽度和高度的纵横比（CSS 中的裁剪溢出）

Maintaining Aspect Ratio with 100% Width & Height (Cropping Overflow in CSS)

javascript

html

css

fullscreen

aspect-ratio