缩放 div 高度纯 CSS

Question

我需要缩放 divs 的高度。

它应该如何工作

divs 应该缩放，保持当前纵横比
宽度应始终为 100px
高度应与 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

您可以使用图像占位符实现此目的：（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 2

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

.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%;
}

请参阅此处 fiddle：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 3

不要为 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>

缩放 div 高度纯 CSS

Scale divs height pure CSS

html

css

scale

aspect-ratio