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

【问题标题】：CSS Image size, how to fill, but not stretch?CSS图像大小，如何填充，但不拉伸？
【发布时间】：2012-07-30 05:57:27
【问题描述】：

我有一张图片，我想给它设置一个特定的宽度和高度（以像素为单位）

但是如果我使用 css (width:150px; height:100px) 设置宽度和高度，图像会被拉伸，并且可能会很丑。

如何使用 CSS 将图像填充到特定大小，并且不拉伸？

填充和拉伸图像示例：

原图：

拉伸图像：

填充图像：

请注意，在上面的填充图像示例中：首先，图像被调整为 150x255（保持宽高比），然后将其裁剪为 150x100。

【问题讨论】：

尝试只设置width 和height 应该相应调整
它拉伸图像。看到这个：jsfiddle.net/D7E3E
部分图片没有调整大小！
Chris Coyier 对此也有一些很好的解决方案：css-tricks.com/perfect-full-page-background-image
非常重要：对于 SEO 而言，这是一种非常糟糕的做法。如果您将它用作背景图片，那么它可以正常工作，但如果您希望 Google 找到该图片，如果它只是背景图片，它将不会被索引。

标签： css image

【解决方案1】：

唯一真正的方法是在你的图像周围有一个容器并使用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/

【讨论】：

谢谢。它有效，但它从 top 裁剪图像。（参见：jsfiddle.net/x86Q7）没有办法从 center 裁剪图像吗？
@MahdiGhiasi：更改 .container img css 中的顶部和左侧属性！！
我可以设置图像的margin-top，例如50px（参见：jsfiddle.net/x86Q7/1），但是如何从真实的中心裁剪它？（没有 jQuery？）
啊抱歉没有看到您的评论，但我添加了 jquery 以防万一:)
很好的解决方案！对我来说，垂直填充比水平填充更重要，所以我只需将“.container img”类的“宽度：100%”更改为“高度：100%”。谢谢！

【解决方案2】：

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

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

编辑：@Dominic Green 打败了我。

【讨论】：

谢谢。它有效，但它从 top 裁剪图像。（见：jsfiddle.net/x86Q7）没有办法从 center 裁剪图像吗？
CSS 可能比较困难，这是我能想到的最好的jsfiddle.net/D7E3E/5
是的，要使其正确居中，您应该使用 jQuery，可能会容易得多。

【解决方案3】：

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

.container {
  width: 150px;
  height: 100px;
  background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

&lt;div class="container"&gt;&lt;/div&gt;

cover 会给你一个放大的图像，contain 会给你一个缩小的图像。两者都将保留像素纵横比。

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

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

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

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

【讨论】：

由于您可以完全在 CSS 中调整图像大小，因此您可以使用大图像，然后使用媒体查询根据每个设备的像素密度将其缩小。
你能解释一下为什么在这种情况下背景位置似乎表示图像中心的位置而不是左上角吗？这是 background-size: cover 的结果吗？
我的只是覆盖整个 DIV 扩展图像。我没有看到曲线结束。
background-repeat: no-repeat; 是干什么用的？如果图像覆盖了它的容器，它无论如何都不会重复。
'background-position' 也可以设置为 'center center'。例如：.container { ... 背景位置：中心中心； }

【解决方案4】：

我帮助构建了一个名为 Fillmore 的 jQuery 插件，它在支持它的浏览器中处理 background-size: cover，并为不支持它的浏览器提供了一个 shim。看看吧！

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

然后您可以使用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 中的封面不同，其中一个结果尺寸总是超过 100%（或在边缘情况下相等）
不，这个解决方案确保它永远不会超过 100%，这就是问题的一部分。他们不希望图像扭曲或超出原始尺寸。
问题是“如何填充”，带有一个填充图像的示例，显然被裁剪了。
但是如果您需要图像具有响应性怎么办？定义特定的宽度和高度是行不通的?
这正是我所需要的。谢谢！

【解决方案7】：

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

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

&lt;img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" /&gt;

See example here

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

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

【讨论】：

有趣的是，这也可以使用img 标签来完成（不仅仅是上面答案中描述的background-image 方法）。谢谢你:)
不幸的是，background-size 在我的项目中很少是可行的解决方案。您不太可能获得任何 SEO 好处，并且无法提供 ALT 标签、标题等来伴随您可能希望为屏幕阅读器提供额外上下文的图像。
这很酷，但没有 IE 支持。所有的 polyfill 都不再起作用了。
只需使用object-fit: cover; 即可。非常感谢
现在支持它的 2017 浏览器应该会增加。当图像更大时，“缩小”会提供更好的选择。 scale-down

【解决方案8】：

无JS无背景图片的CSS解决方案：

方法 1“自动边距”（IE8+ - NOT FF！）：

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  position:absolute; 
  top:0; 
  bottom:0; 
  margin: auto;
  width:100%;
}

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

http://jsfiddle.net/5xjr05dt/

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

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}

div img{
  position:absolute; 
  width:100%;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

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

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

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

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

方法 3“双重包装”（IE8+ - NOT 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/

方法4“双包装和双图像”（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

【讨论】：

这是唯一真正有效的（减去 js 解决方案）。谢谢！
它仅限于溢出高度或宽度，但是一个有趣的解决方案。
@Jake - 上面的方法 2 可能会溢出宽度和高度 - 请使用额外的小提琴查看我的更新答案。
是的。这绝对是一个很好的答案。我会再玩弄它一些。对于需要响应的宽而不是高的图像来说，这有点古怪，但有很多应用程序。
@Jake - 酷 - 我找到了第三种方法来进行水平居中。我扩展了这种方法以支持垂直居中。我将把我的添加作为上面的第三种方法发布。似乎它是 IE7+ 证明（甚至可能更低）。这是原始答案：stackoverflow.com/questions/3300660/…

【解决方案9】：

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

存在三个区别：

在样式上提供width:100%。
如果您使用 bootstrap 并希望图像拉伸所有可用宽度，这将很有帮助。

指定height 属性是可选的，您可以根据需要删除/保留它

.cover {
   object-fit: cover;
   width: 100%;
   /*height: 300px;  optional, you can remove it, but in my case it was good */
}

顺便说一句，没有必要在image 元素上提供height 和width 属性，因为它们将被样式覆盖。
所以写这样的东西就足够了。
```
<img class="cover" src="url to img ..."  />
```

【讨论】：

正是我想要的。
你需要一个吻！
我必须使用 width: 100% 和 height: 100% 来占据两个方向的所有空间。

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

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

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

【讨论】：

我无法理解这是如何工作的，但确实如此。您需要在相对定位的父级内绝对定位跨度 top:0;right:0;bottom:0;left:0 以对其进行标注。
感谢您的反馈，亲爱的 Mike，如果这对您有所帮助，我很高兴。你想让我用你的评论更新答案吗？

【解决方案12】：

不使用 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%);
}

【讨论】：

这是我一直在寻找的答案。
这是我想做很久的事情，谢谢;)
min-width:100% 和 min-height:100% 在图像本身上与网上对此问题的所有答案和等效问题相比有所不同！

【解决方案13】：

要全屏显示图片，试试这个：

背景重复：圆形；

【讨论】：

【解决方案14】：

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

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

【讨论】：

meta.stackoverflow.com/questions/300837/…

【解决方案15】：

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

jQuery Plugin: Auto transform <img> into background style

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

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

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

【讨论】：

【解决方案16】：

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

.profilePosts div {

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

}

【讨论】：

【解决方案17】：

你必须在 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%;
}

对象拟合不起作用
background-size: contain 也不起作用

【讨论】：

【解决方案18】：

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

.avatar-img {
    display: flex;
    justify-content: center;
    align-items: stretch;
    border-radius: 50%;
    border: 1px  solid #dee2e6;
    height: 5.5rem;
    width: 5.5rem;
    overflow: hidden;
}
.avatar-img > img {
    flex-grow: 1;
    object-fit: cover;
}

<div>
  <div class="avatar-img">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqczw3Fb_TYsj0hbPEy0u7Ay2bVq1KurD6hw&amp;usqp=CAU" alt="Test!'s profile photo">
  </div>
  <div class="avatar-img">
    <img src="https://i.pinimg.com/236x/a1/37/09/a137098873af3bf6180dd24cbe388ae9--flower-iphone-wallpaper-wallpapers-flowers.jpg" alt="Test!'s profile photo">
  </div>
</div>

【讨论】：

简单有效，谢谢。
@mqbakamqbaka 欢迎您，感谢您的反馈。