大小：封面和包含图像元素？
我有一个网站有很多页面和不同的背景图片，我从CSS显示它们，如：
body.page-8 {
background: url("../img/pic.jpg") no-repeat scroll center top #000;
background-size: cover;
}
但是，我想使用<img>元素在一个页面上显示不同的（全屏）图片，并且我希望它们具有与上述background-image: cover;相同的属性background-image: cover; 属性（图像不能从CSS中显示，它们必须从HTML文档中显示）。
通常我使用：
div.mydiv img {
width: 100%;
}
要么：
div.mydiv img {
width: auto;
}
使图片充分和响应。 然而，当屏幕变得越来越窄时，图片收缩太多（宽度：100％），并在底部屏幕中显示背景颜色。 另一种方法， width: auto; ，只会使图像成为全尺寸，并且不会响应屏幕尺寸。
有没有办法像background-size: cover一样显示图像background-size: cover是干什么用的？
解决方案＃1 - 新的对象适合属性（尚无IE支持）
只需设置object-fit: cover; 在img上。
body {
margin: 0;
}
img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}<img src="http://lorempixel.com/1500/1000" />实际上有一个非常简单的css解决方案，甚至可以在IE8上运行：
.container {
position: relative;
overflow: hidden;
/* Width and height can be anything. */
width: 50vw;
height: 50vh;
}
img {
position: absolute;
/* Position the image in the middle of its container. */
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
/* The following values determine the exact image behaviour. */
/* You can simulate background-size: cover/contain/etc.
by changing between min/max/standard width/height values.
These values simulate background-size: cover
*/
min-width: 100%;
min-height: 100%;
}<div class="container">
<img src="http://placehold.it/200x200" alt="" />
</div> 假设你可以安排一个你想要填充的容器元素，这看起来可以工作，但感觉有点冒险。 实际上，我只是在较大的区域使用min/max-width/height ，然后将该区域缩放回原始尺寸。
.container {
width: 800px;
height: 300px;
border: 1px solid black;
overflow:hidden;
position:relative;
}
.container.contain img {
position: absolute;
left:-10000%; right: -10000%;
top: -10000%; bottom: -10000%;
margin: auto auto;
max-width: 10%;
max-height: 10%;
-webkit-transform:scale(10);
transform: scale(10);
}
.container.cover img {
position: absolute;
left:-10000%; right: -10000%;
top: -10000%; bottom: -10000%;
margin: auto auto;
min-width: 1000%;
min-height: 1000%;
-webkit-transform:scale(0.1);
transform: scale(0.1);
}<h1>contain</h1>
<div class="container contain">
<img
src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg"
/>
<!-- 366x200 -->
</div>
<h1>cover</h1>
<div class="container cover">
<img
src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg"
/>
<!-- 366x200 -->
</div>