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

唯一真正的方法是在你的图像周围有一个容器，并使用overflow:hidden:

超文本标记语言

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

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

使用溢出容器:隐藏

编辑:@多米尼克·格林打败了我。

如果您想使用图像作为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%;
}

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

While cover will give you a scaled up image, contain will give you a scaled down image. Both will preserve the pixel aspect ratio.

http://jsfiddle.net/uTHqs/ (using cover)

http://jsfiddle.net/HZ2FT/ (using contain)

This approach has the advantage of being friendly to Retina displays as per Thomas Fuchs' quick guide.

It's worth mentioning that browser support for both attributes excludes IE6-8.

我帮助构建了一个名为菲尔莫的jQuery插件，它在支持它的浏览器中处理background-size: cover，并为那些不支持它的浏览器提供了一个垫片。看看吧!

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

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

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

然后你可以用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小提琴http://jsfiddle.net/9kUYC/2/

你可以使用css属性object-fit。# EYZ4

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

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

See example here

There's a polyfill for IE: https://github.com/anselmh/object-fit

Related: object-position (specifies the alignment of an element's contents within its box.)

CSS解决方案没有JS和没有背景图像:

方法1“margin auto”(IE8+ -不是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/

方法二“变换”(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/

方法三“双包装”(IE8+ -不是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/

方法四“双包装双图像”(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

增强接受@afonsoduarte的回答。
，如果你正在使用引导

1. 在样式上提供width:100%。如果您正在使用引导并希望图像拉伸所有可用宽度，这是有帮助的。
   

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

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

3. 顺便说一下，没有必要在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;
}

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

• 不使用css背景
• 只有1个div剪辑它
• 调整到最小宽度，保持正确的纵横比
• 从中心裁剪(垂直和水平，你可以调整顶部，左侧和amp;变换)

如果你使用主题之类的，要小心，他们通常会声明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%);
}

为了适应图像在全屏试试这个:

平铺方式:圆形;

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


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

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

jQuery插件:自动转换<变成背景样式

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


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

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

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

.profilePosts div {


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


}

你必须在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也不工作

你可以通过“伸缩”显示来实现。对我来说!：

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

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

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

strong text