试试这个:http://jsfiddle.net/D7E3E/4/

使用溢出容器:隐藏

编辑:@多米尼克·格林打败了我。

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

平铺方式:圆形;

这将填充图像到特定的大小，而不拉伸或裁剪它

img{
    width:150px;  //your requirement size
    height:100px; //your requirement size

/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
    object-fit:scale-down;
}

基于@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();

增强了@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 ..." />

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