通过设置最大最小宽高使媒体内容自适应盒子大小

jayLog

已于 2022-04-08 17:27:04 修改

阅读量1.2k

点赞数

分类专栏：前端文章标签：媒体前端 css3

于 2022-02-27 19:37:03 首次发布

本文链接：https://blog.csdn.net/jayLog/article/details/123168859

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

通过设置最大最小宽高使媒体内容自适应盒子大小
先看优化后的效果
问题
一开始想到的方法
极简的解决方式
关键样式！！！

例子：
外边宽度是100%同样可以：

通过设置最大最小宽高使媒体内容自适应盒子大小

先看优化后的效果

无论横向还是竖向的内容都能适应

请添加图片描述

问题

在前端的布局中，组件的大小位置一般是固定的(媒体类型已确定的)，比如说轮播图位置，宽度铺满，高度给一个固定值。整体呈横向的矩形，假设比例是16：9。（这里我设置内容居中了）
请添加图片描述

对于大小不固定内容就容易出问题了，比如说图片是9：16的，竖向的矩形,那么图片可能就溢出或者变形或者显示不全了，像这样（这里我设置内容居中了）：

请添加图片描述

这种情况的出现会影响布局和用户体验。

一开始想到的方法

通过js获取内容的宽高，
再判断内容是横向还是竖向，
最后做内容比例的调整。

三步下来确实可以解决掉问题，但是过程过于繁杂，比如说获取内容宽高，如何获取？视频类型的话是否还要监听加载完毕，而后获取。步骤越多，出错的可能性就越大

极简的解决方式

给内容添加1.最大宽度和2.最大高度，3.宽高适应即可。

关键样式！！！

// 属性加在内容上！！
width: auto;
height: auto;
max-height: {外盒子的高度};
max-width: {外盒子的宽度};

例子：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<div class="box center">
        <!-- 横向的图片 -->
		<img src="./images/pic.png">
	</div>
	<div class="box center">
        <!-- 竖向的图片 -->
		<img src="./images/pic2.png">
	</div>
</body>
<style>
	.box {
		width: 400px;
		height: 200px;
		border: 1px solid red;
		/*overflow: hidden;*/
	}
	.box>img{
		width: auto;
		height: auto;
		max-height: 200px;
		max-width: 400px;

		border: 1px solid #666;
	}
	.center{
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
</html>