CSS图像大小，如何填充，但不拉伸？

您可以使用 css 属性 object-fit。 ("设置如何调整被替换元素的内容，例如 <img> 或 <video>，以适应其容器。")

.cover { 对象适合：封面；宽度：50px；高度：100px； }

See example here

IE 有一个 polyfill：https://github.com/anselmh/object-fit

相关： object-position （指定元素内容在其框内的对齐方式。）

---

如果你想将图像用作 CSS 背景，有一个优雅的解决方案。只需在 background-size CSS3 属性中使用 cover 或 contain。

.container { 宽度：150px;高度：100px；背景图片：url（“http://i.stack.imgur.com/2OrtT.jpg”）；背景尺寸：封面；背景重复：不重复；背景位置：50% 50%； }

​

cover 会为您提供放大的图像，而 contain 将为您提供缩小的图像。两者都将保留像素纵横比。

http://jsfiddle.net/uTHqs/（使用封面）

http://jsfiddle.net/HZ2FT/（使用包含）

根据 Thomas Fuchs' quick guide.，这种方法的优点是对 Retina 显示器友好

值得一提的是，浏览器支持这两个属性 excludes IE6-8.

---

accepted answer by @afonsoduarte 的增强功能。
如果您使用的是 bootstrap

在样式上提供宽度：100%。如果您使用引导程序并希望图像拉伸所有可用宽度，这将很有帮助。指定高度属性是可选的，您可以根据需要删除/保留它 .cover { object-fit: cover;宽度：100%； /*高度：300px；可选的，你可以删除它，但在我的情况下它很好 */ } 顺便说一下，不需要在图像元素上提供高度和宽度属性，因为它们将被样式覆盖。所以写这样的东西就足够了。

---

唯一真正的方法是在您的图像周围放置一个容器并使用 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+ - NOT FF！）：

div{宽度：150px；高度：100px；位置：相对；溢出：隐藏； } div img{ 位置：绝对；顶部：0；底部：0；边距：自动；宽度：100%； }

原文：

包装：

http://jsfiddle.net/5xjr05dt/

方法2“转换”（IE9+）：

div{宽度：150px；高度：100px；位置：相对；溢出：隐藏； } div img{ 位置：绝对；宽度：100%；最高：50%； -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);变换：translateY（-50%）； }

原文：

包装：

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

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

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

方法 3“双重包装”（IE8+ - NOT FF!）：

.outer{ 宽度：150px;高度：100px；边距：200px 自动； /* 仅举例 */ 边框：1px 纯红色； /* 只是举例 */ /* 溢出：隐藏； */ /* 开启此功能 */ position: relative; } .inner { 边框：1px 纯绿色； /* 举例 */ position: absolute;顶部：0；底部：0；边距：自动；显示：表格；左：50%； } .inner img { 显示：块；边框：1px 纯蓝色； /* 举例 */ position: relative;对：50%；不透明度：0.5； /* 只是举例 */ }

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

方法4“双包装和双图像”（IE8+）：

.outer{ 宽度：150px;高度：100px；边距：200px 自动； /* 仅举例 */ 边框：1px 纯红色； /* 只是举例 */ /* 溢出：隐藏； */ /* 开启此功能 */ position: relative; } .inner { 边框：1px 纯绿色； /* 举例 */ position: absolute;最高：50%；底部：0；显示：表格；左：50%； } .inner .real_image { 显示：块；边框：1px 纯蓝色； /* 举例 */ position: absolute;底部：50%；对：50%；不透明度：0.5； /* 仅举例 */ } .inner .placeholder_image{ opacity: 0.1; /* 应该是 0 */ }

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

方法 1 的支持稍好一些 - 您必须设置图像的宽度或高度！

带有前缀的方法 2 也有不错的支持（从 ie9 开始） - 方法 2 在 Opera mini 上不支持！

方法 3 使用两个包装器 - 可以溢出宽度和高度。

方法 4 使用双图像（一个作为占位符），这会带来一些额外的带宽开销，但更好的跨浏览器支持。

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

---

不需要图像作为背景的解决方案，并且会自动调整大小而不会被切断或扭曲。

另一种解决方案是将图像放入具有所需宽度和高度的容器中。使用此方法，您不必将图像设置为元素的背景图像。

然后，您可以使用 img 标记并在元素上设置最大宽度和最大高度。

CSS：

.imgContainer {
    display: block;
    width: 150px; 
    height: 100px;
}

.imgContainer img {
    max-width: 100%;
    max-height: 100%;
}

HTML：

<div class='imgContainer'>
    <img src='imagesrc.jpg' />
</div>

现在，当您更改容器的大小时，图像将自动增长到尽可能大，而不会超出界限或扭曲。

如果要将图像垂直和水平居中，可以将容器 css 更改为：

.imgContainer {
    display: table-cell;
    width: 150px; 
    height: 100px;
    text-align: center;
    vertical-align: middle;
}

这是一个 JS Fiddle http://jsfiddle.net/9kUYC/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%);
}

---

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

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 插件，它处理支持它的浏览器中的 background-size: cover，并为不支持它的浏览器提供了一个 shim。给它看看！

---

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

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;
}

---

阅读 StackOverflow 的答案后，我得到的简单解决方案是

.profilePosts div {

background: url("xyz");
background-size: contain;
background-repeat: no-repeat;
width: x;
height: y;

}

---

尝试这样的事情：http://jsfiddle.net/D7E3E/4/

使用带有溢出的容器：隐藏

编辑：@Dominic Green 打败了我。

---

我认为这个答案已经很晚了。无论如何，希望这将有助于未来的人。我遇到了以角度定位卡片的问题。显示了一系列事件的卡片。如果事件的图像宽度对于卡片来说很大，则图像应通过从两侧裁剪和高度为 100% 的方式显示。如果图像高度较长，则图像底部被裁剪，宽度为 100%。这是我的纯CSS解决方案：

https://i.stack.imgur.com/cNPxd.png

HTML：

 <span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>

CSS

.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}

---

你可以通过'flex'显示来做到这一点。为了我！：

.avatar-img { 显示：弹性；证明内容：中心；对齐项目：拉伸；边界半径：50%；边框：1px 实心#dee2e6；高度：5.5rem；宽度：5.5rem；溢出：隐藏； } .avatar-img > img { flex-grow: 1;适合对象：封面； }

---

要全屏显示图像，请尝试以下操作：

背景重复：圆形；

---

<div class="container">
     <img src="http://i.stack.imgur.com/2OrtT.jpg"/>
</div>

<style>
.container {
       width: 150px;
       height: 100px;
       overflow: hidden;
}
</style>

---

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

jQuery Plugin: Auto transform <img> into background style

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

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

此外，这种方式也满足了可访问性的需求。由于此插件不会从您的代码中删除您的 标签，因此屏幕阅读器仍会告诉您 ALT 文本而不是跳过它。

---

您必须在 css 中使用 background-size : cover

js代码

 <div>
   <div className={styles.banner}>banner</div>
 </div>

CSS代码

.banner{
  background: 
    url("./images/home-bg.jpg");
  background-size: cover;
  height: 53rem;
  width: 100%;
}

对象拟合不起作用

背景大小：包含也不起作用

---