CSS 基础
取值单位
外观样式
布局样式
动画样式
工具与规范
实例练习
aspect-ratio
可以指定元素的宽高比。很多时候我们没法提前确定元素的尺寸,比如在一些自适应布局中,又想确定元素的宽高比,那么就可以使用 aspect-ratio
。
比如以下例子中,图片的宽高比就被固定为 16
比 9
。
<img class="image" src="https://3yya.com/jinji.jpg" />
<style>
.image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
</style>
$$demo
<img class="image" src="https://3yya.com/jinji.jpg" /> <style> .image { width: 100%; aspect-ratio: 16 / 9;
object-fit: cover;
}
</style>
$$