css方法事项img图片自适应父元素大小并垂直水平居中

责编:menVScode 2018-09-07 11:11 阅读(220)
之前写过一篇文章【jq实现图片在父级容器内等比例缩放且居中显示】,最终展示的效果与本文效果一样,具体代码可查看文章。

本文是利用css代码实现img标签图片,再父元素中实现垂直居中的方法。

<!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>
	.pic {
	  width: 280px;height: 280px;margin: 20px auto;border: 1px solid #ccc;text-align: center;padding: 5px;
	}
	.pic:before {
	  content: "";display: inline-block;height: 100%;vertical-align: middle;width: 0;
	}
	.pic img {
	  max-width: 280px; max-height: 280px;vertical-align: middle;
	}
	.img {
	  width: 350px;height: 200px;margin: 20px auto;border: 1px solid #ccc;text-align: center;padding: 5px;
	}
	.img:before {
	  content: "";display: inline-block;height: 100%;vertical-align: middle;width: 0;
	}
	.img img {
	  max-width: 280px; max-height: 200px;vertical-align: middle;
	}
</style>
</head>
<body>
  <div class="pic"><img src="http://www.menvscode.com/upload/4879919767864809.png" alt=""></div>
  <div class="img"><img src="http://www.menvscode.com/upload/2246688781808679.png" alt=""></div>
</body>
</html>

效果图


标签: 垂直水平 css
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码