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

Question

我有一个图像,我想设置一个特定的宽度和高度(以像素为单位)

但如果我使用css(width:150px; height:100px)设置宽度和高度,图像将被拉伸,它可能是丑陋的.

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

填充和拉伸图像的示例:

原始图片:

拉伸图像:

填充图片:

请注意,在上面的填充图像示例中:首先,将图像调整为150x255(保持纵横比),然后将其裁剪为150x100.

Answer 1

您可以使用css属性object-fit.

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

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

见这里的例子

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

Answer 2

如果您想将图像用作CSS背景,那么就有一个优雅的解决方案.只需使用cover或contain在background-sizeCSS3属性中.

<div class="container"></div>?

.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%;
}?

虽然cover会给你一个放大的图像,但contain会给你一个缩小的图像.两者都将保留像素长宽比.

http://jsfiddle.net/uTHqs/(使用封面)

http://jsfiddle.net/HZ2FT/(使用包含)

根据Thomas Fuchs的快速指南,这种方法具有对Retina显示器友好的优点.http://cl.ly/0v2u190o110R

值得一提的是,浏览器对这两个属性的支持不包括IE6-8.http://www.quirksmode.org/css/background.html

Answer 3

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

Answer 4

实际上,这只是对这个问题最赞成的答案的推导(不是被接受的答案).

有三个不同之处:

1. 没有必要在元素上提供width:100%和height属性,height因为它们将被样式覆盖.
   所以写这样的东西就足够了.

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

2. 提供width风格.
   如果您使用bootstrap并希望图像拉伸所有可用宽度,这将非常有用.
   

3. 指定image属性是可选的,您可以删除它或保持适合您的需要

   <img class="cover" src="url to img ..."  />
   

Answer 5

CSS解决方案没有JS,没有背景图片:

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

Answer 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小提琴http://jsfiddle.net/9kUYC/2/

Answer 7

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

Answer 8

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

Answer 9

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

.profilePosts div {

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

}