Đặt chiều rộng theo chiều cao

Tôi thấy giải pháp cho chiều cao tùy thuộc vào chiều rộng: css height same as width. Hoặc tại đây: https://stackoverflow.com/a/6615994/2256981. Nhưng câu hỏi của tôi là ngược lại.Đặt chiều rộng theo chiều cao

yếu tố của tôi:

<body> 
    <div id="square"></div> 
</body>

Phong cách cho nó:

body, html { 
    margin: 0; 
    height: 100%; 
    min-height: 300px; 
    position: relative; 
} 
div#square { /* My square. */ 
    height: 75%; /* It's height depends on ancestor's height. */ 
    width: 75vh; /* If supported, preliminarily sets it's width. */ 
    position: absolute; /* Centers it. */ 
    left: 50%; top: 50%; transform: translate(-50%, -50%); 
    background-color: darkorange; /* Makes it visible. */ 
}

Script, mà giữ nó vuông:

window.onload = window.onresize = function (event) { 
    var mySquare = document.getElementById("square"); 
    mySquare.style.width = mySquare.offsetHeight + 'px'; 
};

mã hoàn chỉnh ở đây: http://jsfiddle.net/je1h/hxkgfr9g/

Câu hỏi đặt ra là làm điều tương tự trong CSS thuần túy. Không có kịch bản.

Nguồn

2015-04-16 jevgenij

Tôi không biết bạn có thể làm điều này trong css hay không. Bạn có thể thử https://css-tricks.com/snippets/css/a-guide-to-flexbox/, nhưng tôi không biết điều đó có giúp ích cho bạn hay không. – xdhmoore

Điều này có làm những gì bạn đang tìm kiếm không? http://stackoverflow.com/questions/12899031/css-squares-on-resize – xdhmoore

Tôi cũng nghĩ rằng nó không thể trong CSS tinh khiết, đã thử nhiều lần ... Chúng tôi sẽ phải chờ đợi trước khi tạo kiểu dáng hình vuông hoàn hảo động! Tùy chọn duy nhất tôi thấy là Javascript giống như bạn đã viết thực sự. – Sebastien

Có hai techiques tôi biết để giữ tỉ lệ của một phần tử theo đó là chiều cao:

Khi chiều cao tương đối so với khung nhìn:

Bạn có thể sử dụng đơn vị vh:

div { 
 
    width: 75vh; 
 
    height: 75vh; 
 
    background:darkorange; 
 
}

<div></div>

Đối với một chiều cao dựa trên chiều cao của một yếu tố phụ huynh:

Bạn có thể sử dụng một hình ảnh giả có tỉ lệ khung hình mà bạn muốn. Ví dụ với một tỉ lệ 1: 1 khía cạnh, bạn có thể sử dụng 1 * 1 ảnh .png trong suốt hoặc như nhận xét của @vlgalik 1 * 1 mã hóa base64 gif:

html,body{ 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#wrap{ 
 
    height:75%; 
 
} 
 
#el{ 
 
    display:inline-block; 
 
    height:100%; 
 
    background:darkorange; 
 
} 
 
#el img{ 
 
    display:block; 
 
    height:100%; 
 
    width:auto; 
 
}

<div id="wrap"> 
 
    <div id="el"> 
 
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> 
 
    </div> 
 
</div>

Lưu ý rằng điều này bản demo cuối cùng không cập nhật về thay đổi kích thước cửa sổ. Tuy nhiên, tỉ lệ được giữ trên tải trang

UPDATE:
Theo báo cáo trong the comments thiết display:inline-flex: trên #el dường như để giải quyết các cập nhật về vấn đề cửa sổ thay đổi kích thước.

Nguồn

2015-04-16 14:47:00

Hoặc bạn có thể sử dụng GIF64 1x1px được mã hóa trong suốt hoặc nội tuyến SVG (nhưng có một số vấn đề trong FF và các trình duyệt cũ hơn với SVG). – vlgalik

@vlgalik đẹp, tôi đã cập nhật câu trả lời. –

Cảm ơn câu trả lời của bạn. Đó là hack vui, và phải trung thực, tôi đã không hoàn toàn quản lý để tìm ra cách nó hoạt động :) Tại sao chúng ta cần '#wrap', để được chính xác. Và khi bạn mantioned, tiếc là nó không cập nhật '#el' chiều rộng trên cửa sổ thay đổi kích cỡ. – jevgenij

Edit:. Nhỡ mà bạn muốn thiết lập độ rộng phụ thuộc vào chiều cao, điều này các Tỷ lệ phần trăm đối diện :(

Để hỗ trợ tất cả các tỷ lệ mà bạn có thể sử dụng padding-bottom trong padding-bottom luôn so với chiều rộng của phần tử:

/* the wrapper has a width */ 
 
.wrapper { 
 
    position: relative; 
 
    width: 25%; 
 
    margin-bottom: 10px; 
 
} 
 
/* these elements set the height (using padding-bottom) */ 
 
.square { 
 
    padding-bottom: 100%; 
 
    position: relative; 
 
} 
 
.widescreen { 
 
    padding-bottom: 56.25%; /* 9/16 = 0.5625 */ 
 
} 
 

 
/* 
 
* This is the content. 
 
* Needs position:absolute to not add to the width of the parent 
 
*/ 
 
.content { 
 
    /* fill parent */ 
 
    position: absolute; 
 
    top: 0; bottom: 0; 
 
    left: 0; right: 0; 
 
    
 
    /* visual */ 
 
    padding: 10px; 
 
    background: orange; 
 
    color: white; 
 
}

<div class="wrapper"> 
 
    <div class="square"> 
 
    <div class="content">square</div> 
 
    </div> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <div class="widescreen"> 
 
    <div class="content">16:9 ratio</div> 
 
    </div> 
 
</div>

Nhược điểm duy nhất là, bạn cần một loạt các yếu tố bao bọc.

Nguồn

2015-04-16 15:05:03 darthmaim

Chúng tôi đang tìm chiều rộng theo chiều cao chứ không phải chiều cao theo chiều rộng. – JulianSoto

Đặt chiều rộng theo chiều cao

Trả lời

Các vấn đề liên quan