CSS ile yükseklik eşitliği nasıl oluşturulur

Question

CSS ile yükseklik eşitliği nasıl yapılır.

böyle HTML vardır:

<div style="width:900px;height:200px;"> 
<a style="display:block; float:left; width:35%; background:green"></a> 
</div> 

Şimdi, a elemanı eşit genişlikte (% 35) yüksekliğini yapmak istiyorum. Bunu nasıl yapabilirim? Yardımın için teşekkürler.

Answer 1

kullanımını window.getComputedStyle bilgisayarlı olsun genişlik, daha sonra genişliği ile aynı boyuta sahip olacak eşit yüzdesini elde etmek için hesaplamalar yapın.

HTML

<div class="someDiv" style="width:900px;height:200px;"> 
    <a class="someAnchor" style="display:block; float:left; width:35%; background:green"></a> 
</div> 

JS

var anchor = document.querySelector(".someDiv .someAnchor"); 
var astyle = window.getComputedStyle(anchor); 
anchor.style.height = astyle.width; //this will make it static though 

//to make it a percentage like width so it will expand and contract with resize of parent element 

var pstyle = window.getComputedStyle(anchor.parentNode); 
var pheight = parseInt(pstyle.height); 
var awidth = parseInt(astyle.width); 
anchor.style.height = ((awidth/pheight)*100)+"%"; 

Not çapa eleman bilge div yükseklikten daha büyük olacağı, bunu küçültün olacak ebeveyn içine tutmak için.

JSFiddle Demo

Answer 2

Eh sahip olduğum:

HTML:

<div class='box'> 
    <div class='content'>Aspect ratio of 1:1</div> 
</div> 

CSS:

.box{ 
    background:#000; 
    position: relative; 
    width: 50%;  /* desired width */ 
} 
.box:before{ 
    content: ""; 
    display: block; 
    padding-top: 100%; /* initial ratio of 1:1*/ 
} 

JSFiddle:http://jsfiddle.net/wGszc/

http://www.mademyday.de/css-height-equals-width-with-pure-css.html

İhtiyaçlarınıza göre uyarlayabilir ...

Ve ... google Biraz arama zarar vermez: https://www.google.com/search?q=make+height+iquals+to+width