84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
我有一个带有标题的图像，就像这样：
标题
我在CSS中还有img{max-width:100%}。
img{max-width:100%}
我想同时设置图像的宽度和高度，并在宽度减小到其设置值以下时保持其纵横比。所以，我尝试了这样的代码：
这大致是我想要的，但是当图像被'letterboxed'时，标题离图像底部的距离很远。
有没有办法在保持标题紧贴图像底部的同时获得我想要的结果？
如果您正在使用object-fit: contain，那么图像的原始宽高比已经被保留，因为整个图像必须适应其父元素。所以，如果图像原始宽度为100px，高度为150px，并且您将图像设置为width: 100px和height: 200px，图像的高度仍然为150px，但是在figure元素的顶部和底部会添加额外的25px的空间。
object-fit: contain
width: 100px
height: 200px
figure
要解决这个问题，您只需要将高度设置为“auto”。
img { // 为了可读性，将您的样式声明移到这里 width: 100px; max-width: 100%; height: auto; object-fit: contain; }
现在，如果您实际上想要定义宽度和高度，并强制图像符合这些尺寸，您应该使用除object-fit: contain之外的其他方法。您可以在这里了解其他选项，但也许您想设置figure元素的宽度/高度并让图像填充该空间。在这种情况下，您可以这样做：
figure { display: block; width: 100px; max-width: 100%; height: 200px; } img { width: 100%; height: 100%; object-fit: cover; background: blue; }
如果您正在使用
object-fit: contain，那么图像的原始宽高比已经被保留，因为整个图像必须适应其父元素。所以，如果图像原始宽度为100px，高度为150px，并且您将图像设置为width: 100px和height: 200px，图像的高度仍然为150px，但是在figure元素的顶部和底部会添加额外的25px的空间。要解决这个问题，您只需要将高度设置为“auto”。
img { // 为了可读性，将您的样式声明移到这里 width: 100px; max-width: 100%; height: auto; object-fit: contain; }现在，如果您实际上想要定义宽度和高度，并强制图像符合这些尺寸，您应该使用除
object-fit: contain之外的其他方法。您可以在这里了解其他选项，但也许您想设置figure元素的宽度/高度并让图像填充该空间。在这种情况下，您可以这样做：figure { display: block; width: 100px; max-width: 100%; height: 200px; } img { width: 100%; height: 100%; object-fit: cover; background: blue; }