增强了@afonsoduarte接受的答案。 以防你使用自举

---

There are three differences:

Providing width:100% on the style. This is helpful if you are using bootstrap and want the image to stretch all the available width. Specifying the height property is optional, You can remove/keep it as you need .cover { object-fit: cover; width: 100%; /*height: 300px; optional, you can remove it, but in my case it was good */ } By the way, there is NO need to provide the height and width attributes on the image element because they will be overridden by the style. so it is enough to write something like this. <img class="cover" src="url to img ..." />

唯一真正的方法是在你的图像周围有一个容器，并使用overflow:hidden:

HTML

<div class="container"><img src="ckk.jpg" /></div>

CSS

.container {
    width: 300px;
    height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

这是一个痛苦的CSS做什么你想要和居中图像，有一个快速修复jquery，如:

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

http://jsfiddle.net/x86Q7/2/

不使用css背景 只有1个div剪辑它 调整到最小宽度，保持正确的纵横比 从中心裁剪(垂直和水平，你可以调整顶部，左&变换)

如果你使用主题之类的，要小心，他们通常会声明img max-width为100%。你必须一个都不做。测试一下吧!

https://jsfiddle.net/o63u8sh4/

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
    <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>


div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  min-width:100%;
  min-height:100%;
  height:auto;
  position:relative;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

CSS解决方案没有JS和没有背景图像:

方法1“margin auto”(IE8+ -不是FF!):

div { 宽度:150 px; 身高:100 px; 位置:相对; 溢出:隐藏; ｝ div img { 位置:绝对的; 上图:0; 底部:0; 保证金:汽车; 宽度:100%; ｝ 原始:< p > < / p > <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/> 包装:< p > < / p > < div > <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/> < / div >

http://jsfiddle.net/5xjr05dt/

方法二“变换”(IE9+):

div { 宽度:150 px; 身高:100 px; 位置:相对; 溢出:隐藏; ｝ div img { 位置:绝对的; 宽度:100%; 上图:50%; -ms-transform: translateY (-50%); -webkit-transform: translateY (-50%); 变换:translateY (-50%); ｝ 原始:< p > < / p > <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/> 包装:< p > < / p > < div > <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/> < / div >

http://jsfiddle.net/5xjr05dt/1/

方法2可用于将图像置于固定宽度/高度的容器中。两者都可能溢出-如果图像比容器小，它仍然会居中。

http://jsfiddle.net/5xjr05dt/3/

方法三“双包装”(IE8+ -不是FF!)：

.outer{ width:150px; height:100px; margin: 200px auto; /* just for example */ border: 1px solid red; /* just for example */ /* overflow: hidden; */ /* TURN THIS ON */ position: relative; } .inner { border: 1px solid green; /* just for example */ position: absolute; top: 0; bottom: 0; margin: auto; display: table; left: 50%; } .inner img { display: block; border: 1px solid blue; /* just for example */ position: relative; right: 50%; opacity: .5; /* just for example */ } <div class="outer"> <div class="inner"> <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/> </div> </div>

http://jsfiddle.net/5xjr05dt/5/

方法四“双包装双图像”(IE8+):

.outer{ width:150px; height:100px; margin: 200px auto; /* just for example */ border: 1px solid red; /* just for example */ /* overflow: hidden; */ /* TURN THIS ON */ position: relative; } .inner { border: 1px solid green; /* just for example */ position: absolute; top: 50%; bottom: 0; display: table; left: 50%; } .inner .real_image { display: block; border: 1px solid blue; /* just for example */ position: absolute; bottom: 50%; right: 50%; opacity: .5; /* just for example */ } .inner .placeholder_image{ opacity: 0.1; /* should be 0 */ } <div class="outer"> <div class="inner"> <img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/> <img class="placeholder_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/> </div> </div>

http://jsfiddle.net/5xjr05dt/26/

方法1有稍微更好的支持-你必须设置图像的宽度或高度! 有了前缀，方法2也有不错的支持(从ie9起)-方法2在Opera mini上没有支持! 方法3使用两个包装器-可以溢出宽度和高度。 方法4使用双重图像(其中一个作为占位符)，这会带来一些额外的带宽开销，但更好的跨浏览器支持。

方法1和方法3似乎不适用于Firefox

据我所知，有一个插件可以让这变得简单。

jQuery插件:自动转换<img>为背景样式

<img class="fill" src="image.jpg" alt="Fill Image"></img>

<script>
    $("img.fill").img2bg();
</script>

此外，这种方式也满足了可达性需求。因为这个插件不会从你的代码中删除你的<img>标签，屏幕阅读器仍然会告诉你ALT文本，而不是跳过它。

增强了@afonsoduarte接受的答案。 以防你使用自举

---

There are three differences:

Providing width:100% on the style. This is helpful if you are using bootstrap and want the image to stretch all the available width. Specifying the height property is optional, You can remove/keep it as you need .cover { object-fit: cover; width: 100%; /*height: 300px; optional, you can remove it, but in my case it was good */ } By the way, there is NO need to provide the height and width attributes on the image element because they will be overridden by the style. so it is enough to write something like this. <img class="cover" src="url to img ..." />