适合一般img到响应div

Question

我无法在响应式img中填写一般div。

我的限制是：

1. 保持img
的宽高比
2. img必须涵盖所有div，即height和width必须大于100%
3. img的尺寸必须尽可能最小，即height=100%或width=100%
4. img应该以{{1​​}}
为中心

换句话说，我希望将一个图像放在一个容器内，这样我就不会扭曲它，我将完全覆盖容器，同时显示大部分图像并使其保持居中。

如果简化，我知道我的div总是大于img

遇到的所有解决方案只满足条件的一部分

Answer 1

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

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

参见 JSFiddle

Answer 2

轻松完成此操作的唯一正确方法是将图像设置为容器div的背景图像。只需将图像作为背景图像放置，然后将背景大小设置为覆盖。

<div id="myDiv"></div>

你的CSS：

#myDiv {
    width:320px;
    height:240px;
    background:url('your-url.jpg');
    background-size:cover;
    background-position:center;
}

在此示例中，您可以规定容器所需的宽度和高度，图像将覆盖整个尺寸，同时保持图像宽高比。

工作示例：http://jsfiddle.net/e1ma5gpr/

这可能对阅读有用！ - http://www.css3.info/preview/background-size/