Tôi có thể đặt bất kỳ biến nào trong CSS như tôi muốn chiều cao div của tôi luôn bằng một nửa chiều rộng div của tôi chia tỷ lệ với chiều rộng kích thước màn hình cho div là phần trăm không
<div class="ss"></div>
CSS:
.ss {
width:30%;
height: half of the width;
}
Chiều rộng 30% này tỷ lệ với độ phân giải màn hình
Câu trả lời:
Bạn có thể làm điều đó với sự trợ giúp của padding trên một mục mẹ, vì padding tương đối (thậm chí theo chiều cao) dựa trên chiều rộng của phần tử mẹ.
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
Điều này dựa trên bài viết này: Chia tỷ lệ theo tỷ lệ của các hộp đáp ứng chỉ sử dụng CSS
Một cách tuyệt vời khác để thực hiện điều này là sử dụng hình ảnh trong suốt với tỷ lệ khung hình đã đặt. Sau đó, đặt chiều rộng của hình ảnh thành 100% và chiều cao thành tự động. Điều đó không may sẽ đẩy nội dung gốc của vùng chứa xuống. Vì vậy, bạn cần phải bọc nội dung gốc trong một div khác và đặt nó hoàn toàn ở đầu div cha.
<div class="parent">
<img class="aspect-ratio" src="images/aspect-ratio.png" />
<div class="content">Content</div>
</div>
CSS
.parent {
position: relative;
}
.aspect-ratio {
width: 100%;
height: auto;
}
.content {
position: absolute;
width: 100%;
top: 0; left: 0;
}
height: 100%;trong .content. Cảm ơn các mẹo mặc dù. Tôi thích phương pháp này hơn là đệm.
Nếu bạn muốn định kích thước theo chiều dọc tỷ lệ với chiều rộng được đặt bằng pixel trên một div bao quanh, tôi tin rằng bạn cần một phần tử bổ sung, như sau:
#html
<div class="ptest">
<div class="ptest-wrap">
<div class="ptest-inner">
Put content here
</div>
</div>
</div>
#css
.ptest {
width: 200px;
position: relative;
}
.ptest-wrap {
padding-top: 60%;
}
.ptest-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #333;
}
Đây là giải pháp 2 div không hoạt động. Lưu ý rằng khoảng đệm 60% theo chiều dọc tỷ lệ với chiều rộng cửa sổ, không phải div.ptestchiều rộng:
Đây là ví dụ với mã ở trên, mã này hoạt động:
Câu trả lời này giống với những câu khác ngoại trừ tôi không muốn sử dụng nhiều tên lớp. Nhưng đó chỉ là sở thích cá nhân. Bạn có thể tranh luận rằng việc sử dụng tên lớp trên mỗi div sẽ minh bạch hơn vì khai báo trước mục đích của các div lồng nhau.
<div id="MyDiv" class="proportional">
<div>
<div>
<p>Content</p>
</div>
</div>
</div>
Đây là CSS chung:
.proportional { position:relative; }
.proportional > div > div { position:absolute; top:0px; bottom:0px; left:0px; right:0px; }
Sau đó, nhắm mục tiêu div bên trong đầu tiên để đặt chiều rộng và chiều cao (padding-top):
#MyDiv > div { width:200px; padding-top:50%; }
Đối với bất kỳ ai đang tìm kiếm giải pháp có thể mở rộng: Tôi đã viết một tiện ích trợ giúp nhỏ trong SASS để tạo các hình chữ nhật tỷ lệ thích ứng cho các điểm ngắt khác nhau. Hãy xem Tỷ lệ SASS
Hy vọng nó sẽ giúp mọi người!
Bạn có thể sử dụng chiều rộng khung nhìn để đặt chiều cao. 100 vw là 100% chiều rộng.
height: 60vw;sẽ làm cho chiều cao bằng 60% chiều rộng.
Một cách hữu ích khi bạn làm việc với hình ảnh, nhưng có thể được sử dụng như một giải pháp khác:
<html>
<head>
</head>
<style>
#someContainer {
width:50%;
position: relative;
}
#par {
width: 100%;
background-color:red;
}
#image {
width: 100%;
visibility: hidden;
}
#myContent {
position:absolute;
}
</style>
<div id="someContainer">
<div id="par">
<div id="myContent">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<img src="yourImage" id="image"/>
</div>
</div>
</html>
Để sử dụng, hãy thay thế yourImage bằng url hình ảnh của bạn. Bạn sử dụng hình ảnh với tỷ lệ chiều rộng / chiều cao mà bạn mong muốn.
div id = "myContent" ở đây là ví dụ về giải pháp thay thế trong đó myContent sẽ phủ lên hình ảnh.
Điều này hoạt động như: div gốc sẽ áp dụng cho chiều cao của hình ảnh, chiều cao hình ảnh sẽ áp dụng cho chiều rộng của cha mẹ. Tuy nhiên hình ảnh bị ẩn.
Bạn có thể chỉ định cả chiều rộng và chiều cao của phần tử bằng cách sử dụng vwhoặc vh. Ví dụ:
#anyElement {
width: 20vh;
height: 20vh;
}
Điều này sẽ đặt cả chiều rộng và chiều cao thành 20% chiều cao hiện tại của trình duyệt, giữ nguyên tỷ lệ khung hình. Tuy nhiên, điều này chỉ hoạt động nếu bạn muốn mở rộng tỷ lệ tương ứng với kích thước khung nhìn.