Img 使用 css 适应 div 而无需拉伸

Question

我对 css 有疑问。我必须将可变大小的图像适合 100% 宽度和 96vh 的 div。此外，它在调整浏览器大小时应该看起来不错。我尝试了一些技巧，但结果一点都不好。这是一个示例：http://dev.tourday.co/tour/Test-Emir-tour/45。在 1366x768 分辨率下，图像看起来确实被放大了。

在这种情况下，我希望得到完全缩小时的结果（类似于 http://pokit.org/get/img/4445922ec2a29994b530d45759003d67.jpg）。

由于图片的纵横比与 div 的不同，我可以将边切掉一点，但我真的很想避免拉伸。

尝试弄乱宽度：100% 和高度：100%，但随后会拉伸。我在这里错过了什么？

Answer 1

如果您将图像定义为其容器的背景图像，则可以使用 background-size: cover 。这将切断某些部分（取决于窗口比例），但会填充整个容器并且不会扭曲图像比例。添加background-position: center确保始终显示中间部分。