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

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

但如果我使用css设置宽度和高度（

width:150px；height:100px

），图像将被拉伸，并且可能很难看

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

填充和拉伸图像的示例：

原始图像：

拉伸图像：

填充图像：

---

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

唯一的实际方法是在图像周围放置一个容器，并使用

溢出：隐藏
：

HTML

<div class="container"><img src="ckk.jpg" /></div>

在CSS中，做你想做的事情并将图像居中是一件痛苦的事情，jquery中有一个快速修复方法，例如：

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

试试这样的方法：

使用溢出：隐藏的容器

编辑：@Dominic Green击败了我。
如果您想将图像用作CSS背景，有一个优雅的解决方案。只需在
background size
CSS3属性中使用
cover
或
contain


.container{
宽度：150px；
高度：100px；
背景图像：url（“http://i.stack.imgur.com/2OrtT.jpg");
背景尺寸：封面；
背景重复：无重复；
背景位置：50%50%；
}
​
我帮助构建了一个名为jQuery的插件，它在支持它的浏览器中处理
背景大小：cover
，并为不支持它的浏览器提供了一个垫片。看一看
 基于@Dominic Green使用jQuery给出的答案，这里有一个解决方案，它应该适用于宽度大于高度或高于宽度的图像


可能有一种更优雅的方式来编写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();

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

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

然后，您可以使用
img
标记执行此操作，只需在元素上设置最大宽度和最大高度

CSS:

HTML:

这是一个JS提琴
您可以使用css属性
对象拟合


。封面{
对象匹配：覆盖；
宽度：50px；
高度：100px；
}
CSS解决方案无JS，无背景图像：

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

方法1“自动保证金”（IE8+-非FF！）：

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


div{
宽度：150px；
高度：100px；
位置：相对位置；
溢出：隐藏；
}
部门经理{
位置：绝对位置；
排名：0；
底部：0；
保证金：自动；
宽度：100%；
}
原件：

包装：

上的增强功能。

如果您使用的是引导


有三个区别：

在样式上提供宽度：100%

如果您使用的是引导，并且希望图像拉伸所有可用宽度，这将非常有用。


指定
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 ..."  />




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

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

我想现在回答这个问题已经很晚了。不管怎样，我希望这能对将来的人有所帮助。
我面临的问题是如何将这些卡片按角度放置。显示了一系列事件的卡片。如果卡片的事件图像宽度较大，则图像应通过从两侧裁剪和100%高度显示。如果图像高度较长，则图像的底部将被裁剪，宽度为100%。以下是我的纯css解决方案：


HTML:

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


不使用css背景
只需1个div即可将其剪辑
调整为最小宽度，而不是保持正确的纵横比
从中心裁剪（垂直和水平，您可以使用顶部、左侧和变换进行调整）

如果您使用的是主题或其他内容，请小心，他们通常会将img max width声明为100%。你什么都不做。测试一下：）


原件：

包装：

div{
宽度：150px；
高度：100px；
位置：相对位置；
溢出：隐藏；
}
部门经理{
最小宽度：100%；
最小高度：100%；
高度：自动；
位置：相对位置；
最高：50%；
左：50%；
转化：translateY（-50%）translateX（-50%）；
}
要使图像适合全屏显示，请尝试以下操作：

背景重复：圆形

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

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

.集装箱{
宽度：150px；
高度：100px；
溢出：隐藏；
}
据我所知，有一个插件可以简化此过程。



$（“img.fill”）.img2bg（）；

此外，这种方式还满足了可访问性需求。由于此插件不会从代码中删除标记，屏幕阅读器仍然会告诉您ALT文本，而不是跳过它。
阅读StackOverflow答案后，我得到的简单解决方案是

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

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

谢谢它工作了，但它从顶部裁剪图像。（见此：）难道没有办法从中心裁剪图像吗？@MahdiGhiasi:更改.container img css中的顶部和左侧属性！！我可以设置图像的
边距顶部
，例如
50px
（参见此：），但如何从实际中心裁剪它？（没有jQuery？）啊，很抱歉没有看到你的评论，但我添加了jQuery以防万一：）很好的解决方案！对我来说，垂直填充比水平填充更重要，所以我只需将“宽度：100%”更改为“高度：100%”f
.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}

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

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

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

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

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

.profilePosts div {

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

}