css中flex两列布局(一列自适应其他固定)

问题

最近写一个布局的时候,遇到一个问题。如下图的布局。在没有图片的时候布局是正常的,如果有图片且设置了width:100%;height: 100%; 则会出现图片将自适应布局撑开的情况。

我的解决方式是让图片不缩放,图片外层再添加一个div元素。形如下图:

css中flex两列布局(一列自适应其他固定)_第1张图片

css中flex两列布局(一列自适应其他固定)_第2张图片

大家有什么更好的方式麻烦告知我一下呗,多谢!

代码



	
		
		
	
	
		

		

效果

css中flex两列布局(一列自适应其他固定)_第3张图片

你可能感兴趣的:(javascript,css,前端)