通过设置最大最小宽高使媒体内容自适应盒子大小
先看优化后的效果
无论横向还是竖向的内容都能适应
问题
在前端的布局中，组件的大小位置一般是固定的(媒体类型已确定的)，比如说轮播图位置，宽度铺满，高度给一个固定值。整体呈横向的矩形，假设比例是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>
效果：
