Html 如何设置图像'；高度应与其'；宽度？

如何将图像的高度设置为与宽度相同

图像的高度始终需要与其宽度相同，即使图像的宽度因浏览器窗口的大小调整而改变

为了进一步解释，如果图像的宽度是500px，那么其高度也需要是500px。如果窗口调整大小，图像宽度更改为600px，则其高度也需要更改为600px

限制：请不要在网格或图像上设置固定宽度

.grid{
显示：网格；
网格模板柱：1fr 1fr；
}
img{
宽度：100%；
对象匹配：覆盖；
}

---

您可以将

align self:stretch

添加到您的

img

css规则中，如下所示：

.grid{
显示：网格；
网格模板柱：1fr 1fr；
}
img{
宽度：100%；
对象匹配：覆盖；
自我调整：伸展；
}

---

为每个图像添加一个

div

作为容器，将

高度设置为0，将
填充底部设置为其自身宽度的100%：


.grid{
显示：网格；
网格模板柱：1fr 1fr；
}
.grid分区{
宽度：100%；
身高：0；
垫底：100%；
位置：相对位置；
}
img{
位置：绝对位置；
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
您可以查看minmax（）css函数。@DotV，您能否澄清您是否只是想更改img的大小或图像所在的网格区域？将图像的宽度和高度更改为相同大小而不裁剪图像的某些部分超出了CSS。