24

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

4

6 回答 6

53

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

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

希望有帮助

于 2013-10-18T11:22:21.823 回答
12

不，是的（有点）

好的，所以简短的回答是“不”，不可能。很长的答案是，“是的”，考虑到某些约束和让步（即额外的 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以便您可以正确设置图像类以调整其大小。（可选）在自身上设置widthor ，那么您无需担心将类设置为该值。我的演示假设您在包装器 div（我的班级）上设置了大小。heightimg100%.square
  3. 要使 thediv折叠在哪个驱动比例大小的驱动器上img，您需要设置display: inline-block或 a （如上面的 css 中所述）。floatdiv
  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>
于 2012-12-13T03:05:19.880 回答
2

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

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

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

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

img对比padding-bottom

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

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

结论：

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

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

.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;
}
于 2013-10-29T23:09:44.260 回答
1

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

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

并在任何地方使用它

squareElement(document.querySelector('your-selector'));
于 2015-01-14T11:41:18.837 回答
0

仅靠 CSS 无法做到这一点。使用 jQuery，你可以通过这样做来实现这一点

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

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

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

于 2012-12-13T02:31:21.233 回答
0

不使用相对单位%，因为它们是相对于容器元素计算的。px但是，如果您使用类似的单位或em设置两个维度，则可以使元素成为正方形。

于 2012-12-13T02:32:05.180 回答