Question

我需要缩放div的高度。

如何运作

div应该缩放，保持当前的宽高比
宽度应始终为100px
高度应按比例缩放至100px宽度
我在代码中添加了一些示例宽度和高度
如果需要，添加更多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

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

.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如果代码段不起作用）

＆＃13;

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;
}*/

＆＃13;

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

＆＃13;

缩放div高度纯CSS

3 个答案: