创建一个宽高比为1：1的div，只知道其百分比高度

Question

我想知道您是否可以帮助我。 我有一个div（白色），我需要在边框上放两个圆形按钮（绿色）。一切都应该用CSS完成。 它应该是这样的： Screenshot

现在，事情是，我不知道白格的大小，我不知道它在创作的时候，因为它会被添加到之后的DOM。我所知道的是，白色的div有相对于其未来父母的百分比宽度和高度。因此，在创建时，由于尚未添加，所以对width（），height（）或其css值的任何调用都不起作用。 我已经看过所有这些片段，告诉你如何制作一个固定长宽比的div。我现在需要这个，我需要的按钮是1：1，但我所知道的尺寸，它必须是白色div的高度的100％（因此，它的宽度应该等于它的高度）。我见过的所有例子都假设你知道宽度并使高度保持比例。就我而言，我知道的是高度（100％），我希望宽度适应。 我不知道如何做到这一点。

这是我的代码片段：

body{ 
 
    background-color: #DCDCDC; 
 
} 
 
.container { 
 
    width: 50%; 
 
    height: 7%; 
 
    background: white; 
 
    border-radius: 20px; 
 
    position: absolute; 
 
} 
 
.arrow { 
 
    background: green; 
 
    border-radius: 20px; 
 
    height: 100%; 
 
    position: absolute; 
 
} 
 
.arrow:after{ 
 
    content: ""; 
 
    display: block; 
 
    padding-right: 100%; 
 
} 
 
.arrow:last-child { 
 
    right: 0; 
 
}

<div class="container"> 
 
    <div class="arrow"></div> 
 
    <div class="arrow"></div> 
 
</div>

https://jsfiddle.net/7bxecL9m/

如果你知道我怎么能做到这一点，而无需输入任何固定值（jQuery的使用当然是有效的），我我真的很感激它。

感谢。

Answer 1

为什么不以百分比做一个固定的宽度为您的箭头：

.arrow { 
    background: green; 
    border-radius: 20px; 
    height: 100%; 
    position: absolute; 
    width: 10%; 
} 

Answer 2

body{ 
 
    background-color: #DCDCDC; 
 
} 
 
.container { 
 
    width: 50%; 
 
    height: 7%; 
 
    background: white; 
 
    border-radius: 20px; 
 
    position: absolute; 
 
} 
 
.container:after,.container:before{ 
 
    content: " "; 
 
    display: block; 
 
    padding: 4%; 
 
    z-index: 999; 
 
    top: 0; 
 
    position:absolute; 
 
    background: green; 
 
    border-radius: 50%; 
 
} 
 
.container:before { 
 
    left: 0; 
 
} 
 
.container:after{ 
 
    right: 0; 
 
}

<div class="container"> 
 
</div>

可以使用before和after CSS伪选择实现。你检查这个Example。

Answer 3

有许多变数在这里：

• 由于容器的height是%和圈radius是px单位，一个是静态的，而另一个将调整。
• 只有这样，才能保持1：1只是HTML/CSS，考虑容器的height%将调整圆的height为好，将隔离圈的divwidth & height的东西静态像px单位。
• 现在，既然你说没有固定的尺寸，我能想到的唯一的事情就是评论.arrow的100%height，以防止调整大小不是1：1，和嵌套一个div内.arrow抑制1：1的静态单位（理想情况下直接影响.arrow将代码更少，但如果您不希望/不能将它们设置在该元素上，也许您会考虑这一点）。

如果您希望圆形在内容展开时保持圆形，则需要动态调整高度以匹配宽度。你可以使用Javascript来达到这个目的，但是你的border-radius与container的px的静态单位相关，因为容器总是比较大，类似于border-radius: 50%对于两者都不起作用，圆的50％radius永远不会匹配container的50％ （也就是说，如果你关心半径对齐）。

body { 
 
    background-color: #DCDCDC; 
 
} 
 
body, 
 
html { 
 
    height: 100%; 
 
} 
 
.container { 
 
    width: 50%; 
 
    height: 37%; 
 
    background: white; 
 
    border-radius: 20px; 
 
    position: relative; 
 
} 
 
.arrow { 
 
    background: green; 
 
    border-radius: 20px; 
 
    /*height: 100%;*/ 
 
    position: absolute; 
 
    overflow: hidden; 
 
} 
 
.bLimit { 
 
    height: 40px; 
 
    width: 40px; 
 
    line-height: 40px; 
 
} 
 
.arrow:after { 
 
    content: ""; 
 
    display: block; 
 
    padding-right: 100%; 
 
} 
 
.arrow:last-child { 
 
    right: 0; 
 
}

<div class="container"> 
 
    <div class="arrow"> 
 
    <div class="bLimit">button overflow</div> 
 
    </div> 
 
    <div class="arrow"> 
 
    <div class="bLimit">button</div> 
 
    </div> 
 
</div>

Answer 4

有一个posibility获得使用所需比例的图像（将未示出）这样的结果。

在这种情况下，这个比例是1：1，因此我们将使用50像素的图像（但它可以是任何尺寸）

.container { 
 
    width: 300px; 
 
    height: 20px; 
 
    border: solid 1px blue; 
 
    margin: 40px; 
 
    position: relative; 
 
} 
 
.container:nth-child(2) { 
 
    height: 40px; 
 
} 
 
.container:nth-child(3) { 
 
    height: 60px; 
 
} 
 
.arrow { 
 
    height: 100%; 
 
    background-color: red; 
 
    opacity: 0.5; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    transform: translateX(-50%); 
 
} 
 
.arrow:last-child { 
 
    right: 0px; 
 
    transform: translateX(50%); 
 
} 
 
img { 
 
    height: 100%; 
 
    opacity: 0; 
 
}

<div class="container"> 
 
    <div class="arrow"> 
 
    <img src="https://placehold.it/50x50"> 
 
    </div> 
 
    <div class="arrow"> 
 
    <img src="https://placehold.it/50x50"> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="arrow"> 
 
    <img src="https://placehold.it/50x50"> 
 
    </div> 
 
    <div class="arrow"> 
 
    <img src="https://placehold.it/50x50"> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="arrow"> 
 
    <img src="https://placehold.it/50x50"> 
 
    </div> 
 
    <div class="arrow"> 
 
    <img src="https://placehold.it/50x50"> 
 
    </div> 
 
</div>