CSS 100% chiều cao trên chiều rộng

Question

Thậm chí có thể làm cho chiều rộng của tôi 100% chiều cao chỉ bằng CSS không? Không sử dụng Javascript hoặc tương tự.

{ 
    width: /*100% of height*/ 
} 

Answer 1

Có đơn vị css mới cho điều này

width: 100vh; 

này có nghĩa là độ rộng của nguyên tố này sẽ là 100% chiều cao khung nhìn.

CSS3 có một số giá trị mới để định cỡ kích thước tương ứng với kích thước khung nhìn hiện tại : vw, vh và vmin. Một đơn vị trên bất kỳ giá trị nào trong số ba giá trị này là 1% của trục chế độ xem. "Viewport" == cửa sổ trình duyệt kích thước == đối tượng cửa sổ. Nếu chế độ xem là rộng 40cm, 1vw == 0,4cm.

1vw = 1% chiều rộng khung nhìn 1vh = 1% của chiều cao khung nhìn 1vmin = 1vw hoặc 1vh, nào là nhỏ 1vmax = 1vw hoặc 1vh, nào là lớn hơn (css-tricks post)

tham khảo: https://developer.mozilla.org/en-US/docs/Web/CSS/length

PS: Hỗ trợ cho các thuộc tính mới này thực sự khá tốt trong các trình duyệt hiện đại. See here

Answer 2

Câu hỏi này Height equal to dynamic width (CSS fluid layout) dường như có câu trả lời CSS tốt chỉ bởi Nathan Ryan. Nó cũng đáng đọc các bình luận bên dưới câu trả lời của ông để giải thích thêm. Tôi hi vọng cái này giúp được.

Nếu bạn thấy giải pháp quá phức tạp, có thể đáng để đưa thêm ngữ cảnh cho những gì bạn đang cố gắng đạt được trong trường hợp ai đó có giải pháp thay thế tốt.