增强了@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解决方案没有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

为了适应图像在全屏试试这个:

平铺方式:圆形;

基于@Dominic Green使用jQuery的回答，这里有一个解决方案，应该适用于图像宽度大于它们的高度或高于它们的宽度。

http://jsfiddle.net/grZLR/4/

可能有一种更优雅的方式来处理JavaScript，但这确实有效。

function myTest() {
  var imgH = $("#my-img").height();
  var imgW = $("#my-img").width();
  if(imgW > imgH) {
    $(".container img").css("height", "100%");
    var conWidth = $(".container").width();
    var imgWidth = $(".container img").width();
    var gap = (imgWidth - conWidth)/2;
    $(".container img").css("margin-left", -gap);
  } else {
    $(".container img").css("width", "100%");
    var conHeight = $(".container").height();
    var imgHeight = $(".container img").height();
    var gap = (imgHeight - conHeight)/2;
    $(".container img").css("margin-top", -gap);
  }
}
myTest();

我帮助构建了一个名为Fillmore的jQuery插件，它在支持它的浏览器中处理背景大小:封面，并为那些不支持它的浏览器提供了一个垫片。看看吧!