缩放 div 高度纯 CSS

Question

我需要缩放 div 的高度。

应该如何工作

• div 应该缩放，保持当前的纵横比
• 宽度应始终为 100 像素
• 高度应与 100 像素宽度成比例
• 我在代码中添加了一些示例宽度和高度
• 如果需要，添加更多 HTML + CSS

示例

一个 div 块最初是 300px x 600px。当适合 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

您可以使用底部填充技巧来强制每个单独元素使用响应式纵横比。您必须手动计算每个元素的 padding-bottom，作为高宽比的百分比。

.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')));
    });
});

我选择在 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

不要为 div 指定确切的宽度和高度，而是使用 max-width 和 padding-bottom 的组合来实现这一点。我还冒昧地将您的布局从使用浮动转换为使用 flexbox，以省去必须清除浮动的麻烦。

*{box-sizing:border-box;}
ul{
    display:flex;
    flex-flow:row wrap;
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
}
li{
    background:green;
	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>

Answer 3

您可以使用图像占位符来实现这一点：（fiddle 如果代码 sn-p 不起作用）

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 -->