Cách tạo chiều cao bằng chiều cao bằng css

Question

Cách tạo chiều cao bằng chiều cao bằng css.

Tôi có HTML như thế:

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

Bây giờ, tôi muốn làm cho chiều cao của a yếu tố chiều rộng bằng nhau (35%). Làm thế nào tôi có thể làm điều đó? Cảm ơn sự giúp đỡ của bạn.

Answer 1

sử dụng window.getComputedStyle để có được những tính chiều rộng, sau đó tính toán để có được tỷ lệ phần trăm equvialent mà sẽ làm cho nó có cùng kích thước với chiều rộng.

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)+"%"; 

Lưu ý rằng phần tử neo sẽ lớn hơn so với chiều cao div khôn ngoan, để giữ nó bên cha mẹ bạn sẽ phải mở rộng nó xuống.

JSFiddle Demo

Answer 2

Tôi cũng có mà:

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

Bạn có thể thích ứng với nhu cầu của bạn ...

Và ... Một tìm kiếm chút trong google không bị tổn thương: https://www.google.com/search?q=make+height+iquals+to+width