CSS: Giữ một div chiều cao tương đối so với chiều rộng

Question

Câu hỏi của tôi nó rất giống với câu hỏi này: CSS: 100% width or height while keeping aspect ratio?

Tôi có một div có vị trí được cố định. Chiều rộng của div phải là 100% và chiều cao chính xác 1/6th của số chiều rộng. Có cách nào -webkit-calc() cách thực hiện việc này không?

Lưu ý: Các giải pháp JS không được ưa thích khi thay đổi zoom/định hướng có thể ảnh hưởng đến chiều rộng/chiều cao.

Answer 1

Đây có phải là những gì bạn đang sau? Tôi không sử dụng -webkit-calc(). Tôi đã chèn một hình ảnh 1px vào ảnh 6px vào bên ngoài div có position: fixed áp dụng cho ảnh và đặt hình ảnh thành width của 100% và position: relative. Sau đó, tôi đã thêm một bên trong div mà là hoàn toàn vị trí để được cao và rộng như tổ tiên của nó.

Bây giờ bạn có thể thay đổi chiều rộng của div bên ngoài và cài đặt 'width: 100%' của hình ảnh sẽ đảm bảo rằng cả bên ngoài và bên trong div được đảm bảo luôn có chiều cao bằng 1/6 chiều rộng của chúng (hoặc ít nhất là gần bằng chính xác như nó có thể nhận được, chiều cao sẽ được làm tròn tới số lượng pixel gần nhất). Bất kỳ nội dung nào cũng có thể đi vào bên trong div bên trong.

HTML

<div> 
    <div></div> 
    <img src="https://dl.dropboxusercontent.com/u/6928212/sixbyone.png" /> 
</div> 

CSS

html, body { 
    margin: 0px; 
    padding: 0px; 
} 
div { 
    position: fixed; 
    width: 100%; 
} 
div > div { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px;  
} 
img { 
    width: 100%; 
    display: block;  
    position: relative; 
} 

Dưới đây là một jsFiddle cho thấy các hành vi được yêu cầu.

Answer 2

bạn luôn có thể đặt div chiều rộng như thế này:

$('#div1').css("width", $('#div1').height()/6); 

EDIT:

hoặc bạn có thể sử dụng một cái gì đó như thế này:

/* Firefox */ 
width: -moz-calc(100%/6); 
/* WebKit */ 
width: -webkit-calc(100%/6); 
/* Opera */ 
width: -o-calc(100%/6); 
/* Standard */ 
width: calc(100%/6); 

Đây chỉ là một ví dụ - .. Nhưng nó là không thể để có được chiều cao của một div trong một điểm ảnh trong tập tin css .. bạn cần phải sử dụng jquery cho rằng

EDI T:

chiều cao 1/6 chiều rộng

$('#div1').css("height", window.width()/6); 

Answer 3

bạn có thể sử dụng jquery, ví dụ $('.someclass').css('width', 180); $('.someclass').css('height', $('.someclass').width()/6);

chuyển đề nghị thứ hai từ những nhận xét để có thể đọc

$('.btnResize').click(function() { $('.div').css('height', $('.div').width()/6);}); 

Answer 4

Bạn cũng có thể sử dụng giải pháp mà tôi đã mô tả trong Responsive square columns.

Dựa trên thực tế là% padding-top/bottom và margin-top/bottom được tính theo phần thứ tư của phần tử gốc.

Thích nghi với tình hình của bạn nó sẽ trông như thế này:

FIDDLE

HTML:

<div class="wrap"> 
    <div class="content"> 
    </div> 
</div> 

CSS:

.wrap{ 
    position:fixed; 
    width:100%; 
    padding-bottom:16.666%; /* 100x1/6 = 16.666...*/ 
} 
.content{ 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
}