javascript - 将通用 img 放入响应式 div

Question

我在将通用 img 放入响应式 div 时遇到问题。

我的限制是:

1. 保持 img 的纵横比
2. img 必须覆盖所有 div，即 height 和 width 必须大于 100%
3. img 的大小必须尽可能小，即 height=100% 或 width=100%
4. img 应该相对于 div 居中<​​/li>

换句话说，我想以一种不会扭曲它的方式将图像放入容器中，并且我会完全覆盖容器，同时显示大部分图像并使其居中。

如果简化我知道我的 img 总是比我的 div

遇到的所有解只满足部分条件

Answer 1

为您的图像设置背景并将以下内容添加到您的 css:

background-image: url("YOUR_IMAGE_PATH_HERE");
background-size: cover;
background-position: center center;

参见 JSFiddle