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

【问题标题】：Maintaining Aspect Ratio with 100% Width & Height (Cropping Overflow in CSS)以 100% 的宽度和高度保持纵横比（CSS 中的裁剪溢出）
【发布时间】：2016-12-30 20:27:26
【问题描述】：

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

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

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 效果很好。脚本更改了元素类，所以你必须以其他方式使用 Maju 的 CSS 或更改脚本。

【问题讨论】：

使用min-height 和min-width 应该实际上保持比率，你确定你没有定义width 或height 吗？
@Simon 你是对的。原来我确实将高度也设置为自动。当我删除它时，它看起来在窗口分辨率高时保持比例，但是当我把它变窄时，一些图像仍然垂直拉伸。我会继续测试这个。
jsfiddle.net/464dewrz/1 看起来使用 min-height 和 min-width 确实可以保持比例。我不确定 CSS 与它有什么冲突。

标签： javascript html css fullscreen aspect-ratio

【解决方案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;
}

&lt;div class="background" style="background-image: url(http://www.jurosko.cz/images/stackoverflow.png)"&gt;&lt;/div&gt;

Cover 会以正确的纵横比覆盖整个元素的方式影响图像。

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

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

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

【讨论】：

嘿，我刚刚发现了不同的解决方案，因为我需要 img 因为 SEO 和 background-image 不是我的解决方案（新闻图片）。终于发现了一些非常有趣的东西：stackoverflow.com/questions/11670874/… 特别是解决方案 2 真的帮助我解决了大问题 :) 你可以用 src 获得 img，但可见的将是 background-image。