Question

我不太确定这是否可以在纯CSS中实现，尽管它更可取。我有一张图片：

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

CSS：

.article-thumb {
    height: 55%;
}

那么，我怎样才能使width与height相等？我正在尝试获得一个完美的圆形图像（所以我显然应用了一些border-radius），并且还可以扩展以填充它的容器（实际上填充它的容器55%在height中具体而言）

Answer 1

这是一种方法，它涉及一些额外的标记，因此它可能不会吸引所有人。

让.wrap成为某个父级，包含具有一定宽度和高度的块（可以是％值）。

定义一个内联块子容器.framer，其宽度为父项的百分比，例如23％。

在.framer内，放置一个方形图像.aspect-setter（尺寸不重要，只需保持小）并将宽度设置为100％。然后，图像将缩放到.framer的宽度，.framer将缩小以适合图像（因为它是内联块）并保持其内在形状（因为高度是自动的）。使用visibility: hidden隐藏图像，同时将其保留在内容流中。

将.avatar-container定义为绝对定位元素，并使用偏移量对其进行缩放以适合.framer。由于.framer是正方形，.avatar-container也是正方形。

使用额外的图像不是太优雅，但它可以完成工作。

.wrap {
    width: 400px;
    height: 250px;
    border: 1px dotted gray;
}
.framer {
    display: inline-block;
    position: relative;
    border: 1px dashed blue;
    width: 23%;
}
.aspect-setter {
    vertical-align: top;
    visibility: hidden;
    width: 100%;
    height: auto;
}
.avatar-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background-image: url('http://www.wisportsfan.com/siteresources/images/defaultavatar.jpg');
    background-size: cover;
}

<div class="wrap">
    <div class="framer">
        <img class="aspect-setter" src="http://placehold.it/100x100">
        <div class="avatar-container"></div>
    </div>
</div>

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

1 个答案: