HTML保持元素宽高比的两种方式

最新推荐文章于 2024-09-07 07:17:47 发布

今天你有学习吗

最新推荐文章于 2024-09-07 07:17:47 发布

阅读量158

点赞数 6

分类专栏： h5 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/fyw1789/article/details/140797214

版权

h5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

传统方式

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.item {
				background-color: pink;
				width: 50%;
				margin: 0 auto;
			}
			.inner {
				width: 100%;
				height: 0;
				/* height: 为自身宽度的75%; */
				/* padding 四个方向百分比都是相对于父元素宽度的 */
				padding-bottom: 75%;
				/* 因为没有高,所以正常的布局可能会出问题,子元素都要用绝对定位 */
				position: relative;
			}
			.container {
				/* 如果不想要绝对定位里面还要套一层 */
				position: absolute;
				/* left:0 right:0 top:0 bottom:0 的所有撑满父元素 */
				inset: 0;
			}
		</style>
	</head>
	<body>
		<div class="item">
			<div class="inner">
				<!-- /* 如果不想要子元素全部绝对定位套的一层 不要的话inner里面全部的元素都用绝对定位也可以 */ -->
				<div class="container"></div>
			</div>
		</div>
	</body>
</html>

aspect-ratio (会有兼容性问题低版本浏览器不兼容)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.body {
				width: 50%;
				/* 有兼容性问题 */
				/* 写保持的比例就行 */
				aspect-ratio: 4/3;
				background-color: pink;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="body"></div>
	</body>
</html>

今天你有学习吗

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML保持元素宽高比的两种方式

* left:0 right:0 top:0 bottom:0 的所有撑满父元素 *//* 因为没有高,所以正常的布局可能会出问题,子元素都要用绝对定位 *//* padding 四个方向百分比都是相对于父元素宽度的 *//* height: 为自身宽度的75%;/* 如果不想要绝对定位里面还要套一层 *//* 写保持的比例就行 *//* 有兼容性问题 */
复制链接

扫一扫

专栏目录