Scale divs height pure CSS

Question

我需要調整div的高度。

它應該如何工作

• 的div應該擴大，保持當前的長寬比
• 寬度應爲100像素始終
• 高度應propotion擴展到100px的寬度
• 我在代碼中添加了一些示例寬度和高度
• 根據需要添加更多HTML + CSS

例

一個DIV塊是原本300像素x 600像素。當適合100px的寬度時，它將是100px x 200px。

結果

其結果將是同樣的div寬，但是他們將不同的高度，一些比別人高。

https://jsfiddle.net/80pk066L/5/

注

如果是對子級設置寬度爲100％時，它會包含縱橫比的圖像，但是這不是一個圖像。它是一個div。

HTML

<ul> 
    <li class="scale1"><div></div></li> 
    <li class="scale2"><div></div></li> 
    <li class="scale3"><div></div></li> 
    <li class="scale4"><div></div></li> 
    <li class="scale5"><div></div></li> 
</ul> 

CSS

ul { 
    width: 300px; 
} 

li { 
    float: left; 
    background: red; 
    margin: 10px; 
    list-style: none; 
    display: block; 
    height: 100px; 
    width: 100px; 
    /*REMOVE HEIGHT AND WIDTH HERE, JUST DECORATION 
    Width should always be 100px 
    Height should be whatever, can be larger than 100px 
    */ 
} 

.scale1 div { 
    width: 300px; 
    height: 500px; 
} 

.scale2 div { 
    width: 400px; 
    height: 400px; 
} 

.scale3 div { 
    width: 200px; 
    height: 300px; 
} 

.scale4 div { 
    width: 50px; 
    height: 60px; 
} 

.scale5 div { 
    width: 150px; 
    height: 75px; 
} 

Answer 1

您可以使用底部填充技巧來強制每個單獨元素的響應寬高比。您必須手動計算每個元素的填充底部，以高寬比的百分比表示。

.scale1 div { 
    padding-bottom: 166.667%; 
} 

.scale2 div { 
    padding-bottom: 100%; 
} 

.scale3 div { 
    padding-bottom: 150%; 
} 

.scale4 div { 
    padding-bottom: 120%; 
} 

.scale5 div { 
    padding-bottom: 50%; 
} 

見小提琴這裏：https://jsfiddle.net/teddyrised/80pk066L/9/

如果你想在每一個元素的內容，不過，他們必須絕對定位的子元素中包裹 - 這是因爲如果他們不採取了文件的流，內容高度將上添加至底部填充，因此偏斜寬高比：

li div { 
    position: relative; 
} 
li div span { 
    position: absolute; 
    padding: 10px; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

https://jsfiddle.net/teddyrised/80pk066L/10/

如果使用CSS指定寬高比太枯燥，可以使用JS以編程方式執行此操作。我知道你可能不想用JS實現這一點，但是如果你想要經歷大量的元素，這可能會更有效率。爲了方便起見，我使用jQuery-但任何其他的庫或甚至原始JS將工作，只要相同的邏輯應用於：

$(function() { 
    $('ul li').each(function() { 
     $(this).children('div').css('padding-bottom', $(this).width()/parseFloat($(this).data('aspect-ratio'))); 
    }); 
}); 

我所選擇存儲的縱橫比（寬度的形式-to-高度）在HTML5 data-屬性：

<ul> 
    <li class="scale1" data-aspect-ratio="0.6"><div><span>1</span></div></li> 
    <li class="scale2" data-aspect-ratio="1"><div><span>2</span></div></li> 
    <li class="scale3" data-aspect-ratio="0.667"><div><span>3</span></div></li> 
    <li class="scale4" data-aspect-ratio="0.833"><div><span>4</span></div></li> 
    <li class="scale5" data-aspect-ratio="2"><div><span>5</span></div></li> 
</ul> 

見證明的概念示例這裏：https://jsfiddle.net/teddyrised/80pk066L/11/

Answer 2

你可以做到這一點使用圖像佔位符：（fiddle如果代碼片段不工作）

ul { 
 
    width: 300px; 
 
} 
 
li { 
 
    float: left; 
 
    background: red; 
 
    margin: 10px; 
 
    list-style: none; 
 
    display: block; 
 
    position:relative; 
 
    width:100px; 
 
} 
 
li img { 
 
    position: relative; 
 
    visibility: hidden; /* make sure it's hidden */ 
 
    width: 100%; 
 
    min-width: 100%; 
 
} 
 
li div { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow:hidden; 
 
} 
 
/*.scale1 div { 
 
    width: 300px; 
 
    height: 500px; 
 
} 
 
.scale2 div { 
 
    width: 400px; 
 
    height: 400px; 
 
} 
 
.scale3 div { 
 
    width: 200px; 
 
    height: 300px; 
 
} 
 
.scale4 div { 
 
    width: 50px; 
 
    height: 60px; 
 
} 
 
.scale5 div { 
 
    width: 150px; 
 
    height: 75px; 
 
}*/

<ul> 
 
    <li class="scale1"> 
 
     <div></div> 
 
     <img src="http://placehold.it/300x500" alt="" /> 
 
    </li> 
 
    <li class="scale2"> 
 
     <div></div> 
 
     <img src="http://placehold.it/400x400" alt="" /> 
 
    </li> 
 
    <li class="scale3"> 
 
     <div></div> 
 
     <img src="http://placehold.it/200x300" alt="" /> 
 
    </li> 
 
    <li class="scale4"> 
 
     <div></div> 
 
     <img src="http://placehold.it/50x60" alt="" /> 
 
    </li> 
 
    <li class="scale5"> 
 
     <div></div> 
 
     <img src="http://placehold.it/150x75" alt="" /> 
 
    </li> 
 
</ul> 
 
<!-- - The divs should scale - The width of the div should be max 100px - The height should scale to what fit max 100px width - Remove li height and width. They are just for decoration -->

Answer 3

相反指定確切的寬度和高度爲的div的，使用的max-width和的組合來實現這一點。我還冒昧地將您的佈局從使用浮動轉換爲使用flexbox來保存清除浮動的麻煩。

*{box-sizing:border-box;} 
 
ul{ 
 
    display:flex; 
 
    flex-flow:row wrap; 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
} 
 
li{ 
 
    background:green; 
 
\t flex:1 1 calc(33.333% - 20px); 
 
    margin:10px; 
 
    display:block; 
 
    max-width:calc(33.333% - 20px); 
 
} 
 
div{ 
 
    background:red; 
 
} 
 
.scale1 div{ 
 
    padding:0 0 166.667%; 
 
    max-width:300px; 
 
} 
 

 
.scale2 div{ 
 
    padding:0 0 100%; 
 
    max-width:400px; 
 
} 
 

 
.scale3 div{ 
 
    padding:0 0 150%; 
 
    max-width:200px; 
 
} 
 
.scale4 div{ 
 
    padding:0 0 120%; 
 
    max-width:50px; 
 
} 
 
.scale5 div{ 
 
    padding:0 0 50%; 
 
    max-width:150px; 
 
}

<ul> 
 
    <li class="scale1"><div></div></li> 
 
    <li class="scale2"><div></div></li> 
 
    <li class="scale3"><div></div></li> 
 
    <li class="scale4"><div></div></li> 
 
    <li class="scale5"><div></div></li> 
 
</ul>