css中使用百分比时的参照-------持续更新

1.css中使用百分比时的参照-------持续更新2023-12-26

2.css文本换行设置2023-12-20 3.绝对定位居中2023-12-20 4.使用Element.animate()实现动画2023-12-27 5.css多行文本省略 line-clamp2023-12-28

css中使用百分比时的参照
- padding&margin

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%撑开一个正方形区域，然后图片通过相对定位显示。

效果如下：

posted @ 2023-12-26 22:45 Ewar-k 阅读(37) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 绝对定位居中

· backdrop-filter：为元素后面区域添加图形效果

· 尺寸的百分比

· padding 、margin设置百分比的意义

· css 属性百分比基准—块级父元素

公告

🌏GitHub

昵称： Ewar-k
园龄： 1年3个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

Ewar

码上好

css中使用百分比时的参照-------持续更新

css中使用百分比时的参照

padding&margin

公告

搜索

常用链接

我的标签

合集

随笔分类

随笔档案

阅读排行榜

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