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

Pure CSS Solution - Square Elements?

提问by Trey Keown

If I have a <div>with a relative width (such as width: 50%), is there a simple way to make it have the same width as it does height without resorting to JavaScript?

如果我有一个<div>相对宽度（例如width: 50%），是否有一种简单的方法可以使其具有与高度相同的宽度而无需求助于 JavaScript？

回答by Tomasz Kowalczyk

It is actually possible to achieve it with this neat trick i found at this blog

实际上可以使用我在此博客上找到的这个巧妙技巧来实现它

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

Hope that helps

希望有帮助

回答by ScottS

No, and Yes (Kinda)

不，是的（有点）

Okay, so the short answer is "no," not possible. The long answer is, "yes," given certain constraints and concessions (i.e. extra html markup, and limitations on what can be done).

好的，所以简短的回答是“不”，不可能。长答案是“是”，考虑到某些限制和让步（即额外的 html 标记，以及对可以做什么的限制）。

Given this CSS:

鉴于此 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;
}

With this HTML:

使用此 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>

You can get it to do what this fiddle shows.

你可以让它做这个小提琴显示的事情。

The keys are:

关键是：

1. The image used needs to be a square image, as it is driving the proportional sizing (the imgelement is the only element that can do such proportional work, as it can base its size off the proportion of the image itself).
2. You have to know if you are going to set the widthor the heightso that you can set the image class correctly to size it. Optionally, set the widthor heighton the imgitself, then you don't need to worry about setting a class to the 100%value. My demo was assuming that you set the size on the wrapper div (my .squareclass).
3. To get the divto collapse around the imgwhich is driving the proportional sizing you need to set display: inline-blockor a floaton the div(as noted in the css above).
4. Because of #3, if you want that divto act more "block-like" you need to give them an extra wrapper divlike the third and fourth ones show.

1. 所使用的图像必须是方形图像，因为它正在驱动比例缩放（img元素是唯一可以进行这种比例工作的元素，因为它可以根据图像本身的比例确定其大小）。
2. 您必须知道是否要设置width或 ，height以便您可以正确设置图像类以调整其大小。或者，在其本身上设置width或，然后您无需担心将类设置为该值。我的演示假设您在包装器 div（我的班级）上设置了大小。heightimg100%.square
3. 为了让div崩溃围绕img这带动你需要设置比例大小display: inline-block或float上div（如CSS上面提到的）。
4. 因为#3，如果你想让它表现div得更像“块状”，你需要给他们一个额外的包装器，div就像第三个和第四个展示的那样。

Obviously, there is a lot of extra mark-up involved in this solution.So in many ways it is better to say "just use javascript," but I did want to prove that it could be done (at least in some cases) purely with HTML and CSS.

显然，这个解决方案涉及很多额外的标记。所以在很多方面最好说“只使用 javascript”，但我确实想证明它可以（至少在某些情况下）完全使用 HTML 和 CSS 来完成。

Update: To Show Flexible Sizing Possibility

更新：显示灵活调整大小的可能性

See this fiddle for percentages driving the size, with this html example (widthset to 30%):

使用此 html 示例（width设置为30%），请参阅此小提琴以了解驱动 size 的百分比：

<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>

回答by ScottS

I needed to achieve something similar today and had the same idea with the image. I wanted to check other possibilities and google led me here.

我今天需要实现类似的东西，并且对图像有相同的想法。我想检查其他可能性，谷歌把我带到了这里。

...you don't really need an image src. you can simply use a hashif you want a square. It saves a http request.

...你真的不需要图像src。hash如果你想要一个正方形，你可以简单地使用 a 。它保存了一个 http 请求。

If you want to get different aspect ratio you should use a srcthough. If you want to have a ratio of 16:9 the image should be 16pxwide and 9pxhigh (go as small as possible)

如果你想获得不同的纵横比，你应该使用src虽然。如果你想拥有 16:9 的比例，图像应该16px又宽又9px高（尽可能小）

---

---

Comparing both techniques (see other answers in this thread)

比较两种技术（请参阅此线程中的其他答案）

imgvs. padding-bottom

img对比 padding-bottom

Here's a fiddleto show how much more compatible the imgversion is (can easily handle pxvalue too (an interval will resize the "square" each second)

这是一个显示img版本兼容程度的小提琴（也可以轻松处理px值（间隔将每秒调整“正方形”的大小）

If you use percentage values both techniques can achieve the same result but the padding version does not need the extra markup (<img src="#"/>)

如果您使用百分比值，两种技术都可以获得相同的结果，但填充版本不需要额外的标记 ( <img src="#"/>)

---

---

Conclusion:

结论：

Depending on the implementation each technique has it's pros and contras.

根据实现的不同，每种技术都有其优点和缺点。

---

---

HTML

HTML

<div class="floater">
    <div class="square square_noImg">
        <div class="inner">Hey blue you look totally squared</div>
    </div>
    <div class="square square_img">
        <img src="#"/>
        <div class="inner">Hey red you seem off</div>
    </div>
</div>

CSS

CSS

.floater {
    font-size: 0;
}
.square {
    position: relative;
    display: inline-block;
    width: 100px;
    margin: 0 5px; 
}
.square_noImg {
    padding-bottom: 100px;
    background: red;
}
.square_img {    
    background: blue;
}
img{
    width: 100%;
    height: auto;
    border: 0;
    visibility: hidden;
}
.inner {
    position: absolute;
    top: 10%;
    right: 10%;
    bottom: 10%;
    left: 10%;
    background: white;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    padding: 10px 5px;
}

回答by Antoine

A native JS approach in response to @Dave comment on @praveen-kumar answer:

响应 @Dave 对 @praveen-kumar 回答的评论的原生 JS 方法：

var squareElement = function(el) {
    el.style.height = el.offsetWidth + 'px';
}

and use it anywhere

并在任何地方使用它

squareElement(document.querySelector('your-selector'));

回答by bfavaretto

Not with relative units like %, because they would be calculated relative to a container element. But it's possible to make an element square if you use units like pxor emto set both dimensions.

不是像 那样的相对单位%，因为它们是相对于容器元素计算的。但是，如果您使用单位 likepx或em设置两个尺寸，则可以使元素为正方形。

回答by Praveen Kumar Purushothaman

This cannot be done with CSS alone. Using jQuery you can achieve this by doing

这不能单独使用 CSS 来完成。使用 jQuery，您可以通过执行此操作来实现此目的

var chld = $('.child').width();
$('.child').css({'height':chld+'px'});

Check working example at http://jsfiddle.net/4Jnfq/

在http://jsfiddle.net/4Jnfq/检查工作示例

---

---

A CSS only solution can be found hereon the last "Resize with content" update.
Although it applies for circles, you can remove the border-radius: 50%to make it work for squares.

在上次“随内容调整大小”更新中，可以在此处找到仅 CSS 的解决方案。
虽然它适用于圆形，但您可以删除border-radius: 50%以使其适用于正方形。