纯css解决图片在div中等比例居中问题
上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
*老潘
* 方法一
*/
/*#box{
display: flex;
justify-content: center;
align-items: center;
}
img{
max-height: 100%;
max-width: 100%;
}*/
/*
*方法二
*/
#box{
background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526876617517&di=b25713ffbcad086a482b1ae4f288c306&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fc2cec3fdfc039245a92696b68b94a4c27c1e25f3.jpg) center center no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div id="box" class="box-1" style="width: 200px;height: 200px;">
<!--<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526876617517&di=b25713ffbcad086a482b1ae4f288c306&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fc2cec3fdfc039245a92696b68b94a4c27c1e25f3.jpg"/>-->
</div>
</body>
</html>
网友评论