纯CSS解决方案 - 方形元素？

Question

如果我有一个<div>相对宽度(例如宽度:50%),是否有一种简单的方法可以使它具有与高度相同的宽度而无需借助JavaScript？

Answer 1

实际上,我可以通过这个博客找到的这个巧妙的技巧实现它

#square {
   width: 100%;
   height: 0;
   padding-bottom: 100%;
}

希望有所帮助

Answer 2

不,是(Kinda)

好的,所以简短的回答是"不",不可能.长期的答案是,"是的",给定某些约束和让步(即额外的HTML标记,以及可以做什么的限制).

鉴于此CSS:

.square {
    position: relative;
    margin: 20px;
    display: inline-block; /* could be float */
    overflow: auto; /* UPDATE: if content may overflow square */
}
.sq-setter-w {
    width: 100%;
    height: auto;
    visibility: hidden;
}
.sq-setter-h {
    width: auto;
    height: 100%;
    visibility: hidden;
}
.sq-content {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

使用此HTML:

<div class="square" style="width: 200px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>
<div class="square" style="height: 100px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-h"/>
    <div class="sq-content">Here is content</div>
</div>
<div class="extrawrapper">
<div class="square" style="width: 200px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>
</div>
<div class="extrawrapper">
<div class="square" style="height: 100px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-h"/>
    <div class="sq-content">Here is content</div>
</div>
</div>

你可以让它做这个小提琴显示的东西.

关键是:

1. 使用的图像需要是方形图像,因为它驱动比例尺寸(img元素是可以进行这种比例工作的唯一元素,因为它可以使其尺寸基于图像本身的比例).
2. 你必须知道你是否要设置width或者height这样你可以正确设置图像类来调整它的大小.可选,设置width或height对img自己,那么你并不需要担心的一类设置的100%值.我的演示假设您在包装器div(我的.square类)上设置了大小.
3. 要使div周围的崩溃img推动比例尺寸调整,你需要设置display: inline-block或float打开div(如上面的css中所述).
4. 因为#3,如果你想让它div更像"块状",你需要给它们一个额外的包装,div如第三和第四个显示.

显然,这个解决方案涉及很多额外的标记.所以在很多方面最好说"只使用javascript",但我确实想要证明它可以完全用HTML和CSS完成(至少在某些情况下).

更新:显示灵活的大小可能性

通过这个html示例(width设置为30%),可以看到驱动大小的百分比的小提琴:

<div class="square" style="width: 30%">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>