Html 以百分比设置高度时，保持图像宽度与高度相同

我不太确定是否可以在纯CSS中实现这一点，尽管这会更好。我有一个形象：

<img src="#" class="article-thumb">

---

那么，如何使宽度等于高度？我试图获得一个完美的圆形图像，所以我明显地应用了一些边界半径，它也可以缩放到填充容器的大小，实际上填充容器高度的55%，具体来说，这里有一种方法，它包括一些额外的标记，所以它可能不会吸引所有人

设.wrap为某个父级，包含具有一定宽度和高度的块的值可以为%

定义一个内联块子容器.framer，其宽度为父容器的%，例如23%

在.framer中，放置一个正方形图像。aspect setter尺寸不重要，只需将其保持较小，并将宽度设置为100%。然后，图像将缩放到.framer的宽度，.framer将收缩以适合图像，因为它是一个内联块，并保持其固有形状，因为高度是自动的。使用可见性：隐藏以隐藏图像，同时将其保留在内容流中

将.avatar容器定义为绝对定位的元素，并使用偏移量来缩放它以适合.framer。由于.framer是方形的，.avatar容器也将是方形的

使用一个额外的图像不是很优雅，但它可以完成任务

.包裹{ 宽度：400px； 高度：250px； 边框：1px点灰色； } framer先生{ 显示：内联块； 位置：相对位置； 边框：1px蓝色虚线； 宽度：23%； } .方面设置器{ 垂直对齐：顶部； 可见性：隐藏； 宽度：100%； 高度：自动； } .化身容器{ 位置：绝对位置； 左：0； 排名：0； 右：0； 底部：0； 边界半径：50%； 背景图片：url'http://www.wisportsfan.com/siteresources/images/defaultavatar.jpg'; 背景尺寸：封面； }

---

页面加载后高度是否会动态更改？你试过什么没用的？是的，会的。例如，当设备处于纵向或横向模式时，高度会发生变化。我不确定这项技术是否适用于您，但是您可以将图像设置为div的背景，并将背景大小设置为cover：这就不需要任何动态大小，因为浏览器会为您处理它。CSS中有一个奇怪的东西。如果以百分比表示高度，则它将取决于容器的宽度。所以，小心点。我同意@Rorymcrossan。我通常认为在这种情况下，背景图像更容易处理。

.article-thumb {
    height: 55%;
}