css中使用百分比时的参照-------持续更新
css中使用百分比时的参照
padding&margin
使用百分比值时，参照的是父元素的宽度，例如
利用该特性可以实现根据父元素宽度变化，父元素内部的图片依然保持正方形的效果，下面是一个通过flex布局实现两列布局的例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
html, body {
margin: 0;
padding: 0;
}
.card {
flex: 0 0 50%;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.description {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<title>Document</title>
</head>
<body>
<div id="app">
<div class="container">
<div class="card" v-for="item in 10">
<div style="margin: 10px">
<div style="padding-bottom: 100%;position: relative">
<img style="position: absolute"
src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Rk0shuvnCBQigO94QGlaogHaE8?rs=1&pid=ImgDetMain"
alt="">
</div>
<div>
标题
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet at blanditiis consectetur cupiditate
distinctio dolore, ea illo ipsa ipsam ipsum laudantium magnam nihil nulla quia recusandae rerum sunt
temporibus vel.
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({}).mount('#app')
</script>
</body>
</html>
关键是通过padding-bottom:100%撑开一个正方形区域，然后图片通过相对定位显示。
效果如下：
