如果我的<div>
具有相对宽度(例如宽度:50%),是否有一种简单的方法可以使其具有与高度相同的宽度而无需求助到JavaScript?
答案 0 :(得分:42)
答案 1 :(得分: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>
关键是:
img
元素是唯一可以进行这种比例工作的元素,因为它可以根据其比例来确定图像本身)。width
或height
,以便您可以正确设置图像类以调整其大小。 (可选),在width
上设置height
或img
,然后您无需担心将类设置为100%
值。我的演示假设您在包装器div(我的.square
类)上设置了大小。div
围绕推动比例尺寸调整的img
进行展开,您需要在display: inline-block
上设置float
或div
(如上面的css所述。)div
更像“块状”,你需要给它们一个额外的包装div
,就像第三和第四个显示一样。显然,这个解决方案中有很多额外的标记。所以在很多方面最好说“只使用javascript”,但我确实想证明它可以完全(至少在某些情况下)完全使用HTML和CSS。
See this fiddle for percentages driving the size,此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>
答案 2 :(得分:2)
我需要在今天实现类似的东西,并对图像有相同的想法。我想检查其他可能性,谷歌带领我来这里。
...你真的不需要图像src
。如果你想要一个正方形,你可以简单地使用hash
。
它保存了一个http请求。
如果你想获得不同的宽高比,你应该使用src
。如果您希望比例为16:9,则图片应为16px
宽且9px
高(尽可能小)
img
与padding-bottom
Here's a fiddle显示img
版本的兼容性(可以轻松处理px
值(间隔会每秒调整“square”)
如果使用百分比值,两种技术都可以达到相同的效果,但填充版本不需要额外的标记(<img src="#"/>
)
根据实施情况,每种技术都有它的优点和反差。
<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>
.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;
}
答案 3 :(得分:0)
单独使用CSS无法做到这一点。使用jQuery,你可以通过
来实现这一点var chld = $('.child').width();
$('.child').css({'height':chld+'px'});
上的工作示例
在最后一次“调整内容大小”更新时,可以在 here 找到仅限CSS的解决方案。
虽然它适用于圈子,但您可以移除border-radius: 50%
以使其适用于方块。
答案 4 :(得分:0)
不使用像%
这样的相对单位,因为它们是相对于容器元素计算的。但是,如果您使用px
或em
等单位来设置两个维度,则可以使元素成为正方形。
答案 5 :(得分:0)
本地JS方法回应@Dave评论@ praveen-kumar回答:
var squareElement = function(el) {
el.style.height = el.offsetWidth + 'px';
}
并在任何地方使用
squareElement(document.querySelector('your-selector'));