aspect-ratio相关特性测试实例页面

回到相关文章 »

效果：

// zxx: 缩放下面内容宽度，看看效果

基本效果

内容过剩

如果内容很多，看看元素的高度是多少？如果内容很多，看看元素的高度是多少？如果内容很多，看看元素的高度是多少？

如果内容很多，同时设置了min-height:0，看看元素的高度是多少？如果内容很多，同时设置了min-height:0，看看元素的高度是多少？

只设置高度

height:30px，aspect-ratio: 10 / 1，则此时width是300px

宽高均设置

忽略aspect-ratio: 10 / 1

max-width限制

aspect-ratio:10/1 max-width:240px

aspect-ratio:10/1，同时max-width:240px

height:30px，aspect-ratio:10/1，同时max-width:240px

图片img width/height

图片拉伸则aspect-ratio优先级过于HTML宽高属性。

代码：

CSS代码：

.box {
    aspect-ratio: 10 / 1;
    background: deepskyblue;
}
.min-height-0 {
    min-height: 0;
}
.height-only {
    height: 30px;;
}
.width-height {
    width: 300px; height: 100px;
}
.max-width {
    width: 240px;
}
.img-size {
    aspect-ratio: 1 / 1;
}

HTML代码：

<h4>基本效果</h4>
<div class="box"></div>

<h4>内容过剩</h4>
<div class="box">如果内容很多，看看元素的高度是多少？如果内容很多，看看元素的高度是多少？如果内容很多，看看元素的高度是多少？</div>
<div class="box min-height-0">如果内容很多，同时设置了min-height:0，看看元素的高度是多少？如果内容很多，同时设置了min-height:0，看看元素的高度是多少？</div>

<h4>只设置高度</h4>

<div class="box height-only">height:30px，aspect-ratio: 10 / 1，则此时width是300px</div>

<h4>宽高均设置</h4>
<div class="box width-height">忽略aspect-ratio: 10 / 1</div>

<h4>max-width限制</h4>
<div class="box max-width">aspect-ratio:10/1 max-width:240px</div>
<div class="box max-width">aspect-ratio:10/1，同时max-width:240px</div>
<div class="box height-only max-width">height:30px，aspect-ratio:10/1，同时max-width:240px</div>

<h4>图片img width/height</h4>
<p>图片拉伸则aspect-ratio优先级过于HTML宽高属性。</p>
<p><img class="img-size" src="mm.jpg" width="256" height="192"></p>