父元素有最大高度max-height限制，子元素的最大高度不超过父元素

最新推荐文章于 2023-11-07 16:47:17 发布

爱忽悠的唐唐

最新推荐文章于 2023-11-07 16:47:17 发布

阅读量5.9k

点赞数

分类专栏： css 文章标签： max-height 图片自适应 flex布局

本文链接：https://blog.csdn.net/weixin_37221852/article/details/95531357

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

有这样一个需求，将图片包裹在一个容器中，但这个容器的高度不能超过它父级高度的80%，而这张图片能够保持宽高比，且最大高度不能超过这个容器。css代码如下：

实现思路：
在图片外再加一层div,将原有的容器设置为flex布局，而图片外新加的这层div设置flex:1,图片再设置max-height，就能完美完成这个需求了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
	<style type="text/css">
		html,body{
			padding:0;
			margin:0;
		}
		.p-10{
			padding:10px;
		}
		.box{
			width:600px;
			max-height:80%;
			display: flex;
		}
		.img-container{
			background:red;
			flex:1;
			width: 100%;
			text-align: center;
		}
		img{
			max-width: 100%;
			max-height: 100%;
			vertical-align: middle;
		}
	
	</style>
</head>
<body>
   <div class="p-10 box">
	   <div class="img-container">
		   <img src="test.jpg" >
	   </div>
	   
   </div> 
</body>
</html>

爱忽悠的唐唐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
父元素有最大高度max-height限制，子元素的最大高度不超过父元素

有这样一个需求，将图片包裹在自适应的容器中，但这个自适应容器的高度不能超过屏幕高度的60%，而这张图片能够自动进行缩放，最大高度不能超过这个父容器。css代码如下：实现思路：在图片外再加一层div,将原有的容器设置为flex布局，而图片外新加的这层div设置flex:1,图片再设置max-height，就能完美完成这个需求了。<!DOCTYPE html><html ...
复制链接

扫一扫