百分比padding---------实现图片固定比例并自适应布局 以及aspect-ratio属性、cqw单位

一、百分百padding

在文档流中css的margin和padding这两个属性垂直方向的百分百值都是基于宽度计算的，这个也是本次布局方式的核心。

这个方案优势：图片自适应同时保持比例，以及页面刷新的时候没有布局稳固不晃动

这种方式应用场景就是：移动端或者需要具备响应式的图片上面，你总不能把图片宽高写死吧~

对于将图片设置为背景图的需求，我们一般会选择下面几种方式

1.background属性 ，使用background-size属性控制，但是这种方式带来的弊端就是总有部分图片高度或宽度是无法显示的。

2.使用vw单位，加入我们的图片不是通栏，左右有间距的话，那么就需要用calc去计算高度的值

3.百分百padding去实现（完美解决方案）

.pic{
    padding: 3.33% 0 0;
    background-size: cover;
}

假设图片不能作为背景图的话，那么也是可以通过百分百padding去实现，那么就有人问了，为什么不能直接设置图片的width为100%然后height不设置，这样子的话也可以实现图片比例不变，而且也是随着页面自适应。这种方式固然可以但是存在一个不好的体验问题：那就是随着页面加载的进行，图片占据的高度会有一个从0到计算高度的图片变化，视觉上会有明显的元素跳动，代码层面会有布局重计算。

所以对图片高宽进行同时约定还是有必要的，但是同时要保证宽度自适应，似乎有点难度。记住，如果遇到这种需求场景，没有比百分比padding布局更好的做法！

对于这种图片宽度100%容器，高度按比例的场景，padding-bottom的百分比值大小就是图片元素的高宽比，就这么简单。

<div class="works-item-t">
    <img src="./150x200.png">
</div>

.works-item-t {
    padding-bottom: 133%;
    position: relative;
}
.works-item-t > img {
    position: absolute;
    width: 100%; height: 100%;
}

但，有时候，图片宽度并不是100%容器的，例如，图片宽度50%容器宽度，图片高宽比4:3，此时，CSS垂直方向百分比就666了

.img-box {
    padding: 0 50% 66.66% 0;
}

下面是demo：

	<template>
		<div>
			<div class="works-wrap">
			    <ul class="works-con">
			        <li class="works-item">
			            <div class="works-item-t">
			                <img src="/static/logo.png">
			            </div>
			            <div class="works-item-b">
			                <h4 class="works-item-h">aaaa</h4>
			            </div>
			        </li><li class="works-item">
			            <div class="works-item-t">
			                <img src="/static/logo.png">
			            </div>
			            <div class="works-item-b">
			                <h4 class="works-item-h">bbbbb</h4>
			            </div>
			        </li>
			    </ul>
			</div>
		</div>
	</template>

	<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {

			}
		},
		components: {},
		computed: {
			...mapState([])
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {

		},
	}
	</script>

	<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
		border: none;
		line-height: 1;
	}
.works-wrap {
    max-width: 1000px;
    margin: auto;
}
.works-con {
    padding: 0;
    margin: 0 -.5em;
    list-style: none;
    overflow: hidden;
}
.works-item {
    display: inline-block;
    min-width: 150px;
    width: calc(20% - 1em);
    margin: 20px .5em 0;
    background: AppWorkspace;
    vertical-align: top;
}
.works-item-t {
    padding-bottom: 133%;
    position: relative;
}
.works-item-t > img {
    position: absolute;
    width: 100%; height: 100%;
}
.works-item-b {
    margin: .5em .5em 1em;
}
.works-item-h {
    margin: 10px 0 0;
    color: CaptionText;
    font-size: 100%;
}


@media screen and (max-width: 1000px) {
    .works-item {
        width: calc(25% - 1em);
    }
}
@media screen and (max-width: 768px) {
    .works-item {
        width: calc(33.3% - 1em);
    }
}
@media screen and (max-width: 580px) {  
    .works-item {
        width: calc(50% - 1em);
    }
}
@media screen and (max-width: 400px) {  
    .works-item {
        width: calc(100% - 1em);
    }
}
	</style>

文章知识点来源于一位大佬的博客文章，阅读后受益匪浅！

二、aspect-ratio属性

随着CSS技术的发展，固定比例的图片布局有了新的选择，这个就是CSS aspect-ratio属性，专门设置元素的高宽比。

不过此属性用在IMG元素上是没有效果的，因为图片元素具有内在尺寸，不受aspect-ratio属性影响。

相比百分百padding方法，css简化了不少：

<ul class="box">
    <li class="list">
        <img src="0.jpg" />
    </li>
    <li class="list">
        <img src="1.jpg" />
    </li>
    ...
</ul>

.box {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.list {
    flex-basis: calc(25% - 1.5rem / 4);
    aspect-ratio: 1 / 1;
}
.list img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

三、cqw单位

如今出现最简单的方法

<div class="box">
    <img src="0.jpg" />
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
    <img src="4.jpg" />
    <img src="5.jpg" />
</div>


.box {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    container-type: inline-size;
}
.box img {
    width: calc(25cqw - 1.5rem / 4);
    height: calc(25cqw - 1.5rem / 4);
    object-fit: cover;
}

container-type:inline-size可以让普通元素变成container容器元素，而cqw是容器宽度单位，1cqw=1%的容器宽度，100cqw就是容器宽度。

而本需求需要一行显示4个图片，因此，每个图片相对于容器的大小就很好计算了。

关于详细的容器单位介绍详看另一篇文章