[英]How to scale an image with css to fill a div keeping aspect ratio?
I'd like to fill a div with an img
, keeping aspect ratio and stretching either width or height as much as required to fit in. 我想用img
填充div,保持宽高比并根据需要适应宽度或高度的拉伸。
<div style="width: 80px; height: 80px">
<img src="..." />
</div>
How could I achieve it? 我该如何实现? If the image is not quadratic, it must be "zoomed in" and either be scropped top-bottom or left-right, depending which side is the bigger one. 如果图像不是二次方的,则必须将其“放大”,并从上到下或从左到右裁剪,这取决于哪一侧更大。 Moreover the image should afterwards be centered, so that the corners get cut equally. 此外,图像之后应居中,以使拐角平分。
I tried (but no effect): 我尝试了(但没有效果):
.thumb {
max-width:100%;
max-height:100%;
}
If I add additional width: 100%; height:100%;
如果我添加其他width: 100%; height:100%;
width: 100%; height:100%;
, the images fit perfectly, but are resized not keeping aspect ratio
. ,图像可以完美契合,但尺寸调整后无法保持aspect ratio
。
the following did the trick: 以下是窍门:
width:100%;
height:100%;
object-fit: cover;
overflow: hidden;
Using max-width
, the image will be contained inside the div , there will be no overflow. 使用max-width
,图像将包含在div内 ,不会溢出。
If you use min-width
instead, the shorter side will be exactly 100% of the div while the other side can be longer. 如果改用min-width
,则较短的一面将恰好是div的100%,而另一面则可以较长。 To center the image, we can use translate and relative positioning . 要使图像居中,可以使用平移和相对定位 。
The following code works. 以下代码有效。
div {
overflow: hidden;
}
.thumb {
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
position: relative;
left: 50%;
top: 50%;
}
To keep an image's aspect ratio, just specify one dimension: 要保持图像的长宽比,只需指定一个尺寸即可:
div {
width: 80px;
height: 80px;
border: 2px solid red;
overflow: hidden;
}
img {
height: 100%;
}
This will produce the following effect: 这将产生以下效果:
However, as you can see, the kitten is not central, but you can use Flex box to sort this out. 但是,如您所见,小猫不在中央,但是您可以使用Flex框进行整理。
div {
width: 80px;
height: 80px;
border: 2px solid red;
justify-content: center;
display: flex;
flex-direction: row;
}
img {
flex: 1;
height: 100%;
}
.thumb {
max-width:100%;
height:auto;
}
Or ( to allow scale up and down, which will look pixelated if you scale up, where the above will only scale to the max size of the image ) 或(允许放大和缩小,如果您放大则看起来像是像素化,上面的内容只会放大到图像的最大尺寸)
.thumb {
width:100%;
height:auto;
}
Is what you are looking for. 是您要找的东西。
More info on responsive images: 有关响应式图像的更多信息:
use background-size:cover 使用background-size:cover
div{ background-image:url(http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg); background-size:cover; }
<div style="width:80px;height:80px;"></div>
Not sure if anyone still looking at this post. 不知道是否有人还在看这篇文章。 I came across this while I was looking for a way to fit a image into a < div > without getting the unwanted white space around the image, because I was using hover & stick-out effect. 我在寻找一种使图像适合<div>的方法时遇到了这个问题,因为我使用的是悬停和伸出效果,因此在图像周围没有多余的空白。 I was inspired by Matt's solution. 我的灵感来自Matt的解决方案。 Instead of 代替
.thumb {
max-width:100%;
height:auto;}
I added 我加了
.thumb {
max-width:100%;
max-height:100%;
height:auto;}
Now my images fit in to the < div > perfectly without having those white space stick out with the image. 现在,我的图像可以完美地适合<div>,而图像上不会留那些空白。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.