Html 相等列的图像高度和纵横比_Html_Css

Html 相等列的图像高度和纵横比

html css

Html 相等列的图像高度和纵横比,html,css,Html,Css,我有三个图像，一个接一个，创建了一个3列的图像布局。我需要这些图像有一个特定的高度，所以无论图像如何，它们都会被裁剪到这个高度关键是，我需要这些图像根据您调整窗口大小的方式来保持纵横比如果我声明了一个特定的高度（即700px或70vh），那么如果窗口是1900px宽或700px宽，则外观会有很大的不同是否有一种方法可以“锁定”图像的高度尺寸，使它们保持其外观，无论您的屏幕如何，并且考虑到每个图像可能与其他图像的高度不同提前感谢您可以设置最小/最大宽度和高度： img{ 显示：块；最

我有三个图像，一个接一个，创建了一个3列的图像布局。我需要这些图像有一个特定的高度，所以无论图像如何，它们都会被裁剪到这个高度

关键是，我需要这些图像根据您调整窗口大小的方式来保持纵横比

如果我声明了一个特定的高度（即700px或70vh），那么如果窗口是1900px宽或700px宽，则外观会有很大的不同

是否有一种方法可以“锁定”图像的高度尺寸，使它们保持其外观，无论您的屏幕如何，并且考虑到每个图像可能与其他图像的高度不同

提前感谢

您可以设置最小/最大宽度和高度：

img{
显示：块；
最大宽度：230px；
最大高度：95px；
宽度：自动；
高度：自动；
}

此图像最初为400x400像素，但应通过CSS调整大小：

您可以设置最小/最大宽度和高度：

img{
显示：块；
最大宽度：230px；
最大高度：95px；
宽度：自动；
高度：自动；
}

此图像最初为400x400像素，但应通过CSS调整大小：

将图像的宽度设置为其父容器的百分比。例如：

body {
   height: 100vh;
   display: flex;
   justify-content: space-evenly;
}

img {
   width: 50%;
}

这将确保图像始终占据其所在容器的50%，在本例中为主体。

将图像宽度设置为其父容器的百分比。例如：

body {
   height: 100vh;
   display: flex;
   justify-content: space-evenly;
}

img {
   width: 50%;
}

这将确保图像始终占据其所在容器的50%，在本例中为主体。

有几种方法可以做到这一点

使用背景图像而不是将图像放入div-这非常灵活
对象拟合适用于图像本身，但您必须在图像上设置尺寸，而不仅仅是容器。现在有更多的人支持这一点，但像往常一样IE是一个问题

对于这两种情况，您都希望使用

cover

，这样图像就足够大，可以填满容器，但会裁剪出不合适的部分

下面介绍这两种方法的代码。有关其工作原理，请参见注释：

背景图像

.column{
/*这是重要的一点*/
背景尺寸：封面；
/*这是图像所在的位置。
这使它水平居中，垂直于顶部
您可以使用px或%中的左、右、下或右值*/
背景位置：中上；
/*这并不重要。这是为了让列可以正常工作*/
宽度：30%；
高度：400px；
显示：内联块；
边框：1px纯红；
}
/*将图像作为背景图像*/
.pic1{背景图像：url（“https://via.placeholder.com/300x700"); }
.pic2{背景图像：url（“https://via.placeholder.com/250x400"); }
.pic3{背景图像：url（“https://via.placeholder.com/300x300）；}