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

Question

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

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

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

填充和拉伸图像的示例：

原图：

原来的

拉伸图像：

填充图像：

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

score 728 · Accepted Answer

您可以使用 css 属性object-fit。 （“设置如何调整替换元素的内容，例如<img>or <video>，以适应其容器。”）

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

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

在此处查看示例

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

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

score 427 · Accepted Answer

427

于 2012-08-01T16:17:42.090 回答

score 81 · Accepted Answer

增强了@afonsoduarte 接受的答案。
如果您使用引导程序

有以下三个区别：

提供width:100%风格。
如果您使用引导程序并希望图像拉伸所有可用宽度，这将很有帮助。

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

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

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

score 57 · Accepted Answer

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

score 29 · Accepted Answer

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

方法 1“margin auto”（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

score 13 · Accepted Answer

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

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

然后，您可以使用img标签执行此操作，只需在元素上设置 max-width 和 max-height。

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/

score 7 · Accepted Answer

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

score 5 · Accepted Answer

使用 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();

score 4 · Accepted Answer

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

score 4 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

编辑：@Dominic Green 打败了我。

score 3 · Accepted Answer

你可以通过'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>

score 3 · Accepted Answer

after reading StackOverflow answers the simple solution I got is

.profilePosts div {

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

}

score 3 · Accepted Answer

我认为这个答案已经很晚了。无论如何，希望这将有助于未来的人。我遇到了以角度定位卡片的问题。显示了一系列事件的卡片。如果事件的图像宽度对于卡片来说很大，则图像应通过从两侧裁剪和高度为 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;
}

score 2 · Accepted Answer

2

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

背景重复：圆形；

于 2019-09-23T06:46:11.300 回答

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

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

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

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

score 0 · Accepted Answer

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

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也不工作

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

18 回答 18

Related

Reference