您的位置：首页 > Web前端 > CSS

css图片图片居中显示

2016-07-20 11:08 393 查看

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>测试页面</title>

</head>

<body>

<style>

* {
padding: 0;
margin: 0;

}

.box {
width: 200px;
height: 200px;
overflow: hidden;
border: 2px solid #000;
border-radius: 50%;

}

div.box {
background-position: center;
background-size: cover;
background-repeat: no-repeat;

}

img.box {
object-fit: cover;
object-position: center;

}

</style>

<h1>原图(非正方形)</h1>

<img src="http://img6.cache.netease.com/m/2016/7/18/20160718170620f5fe3.png" width="200">

<br><br>

<h1>第一种: 用background-size和bakground-position </h1>

<div class="box" style="background-image:url(http://img6.cache.netease.com/m/2016/7/18/20160718170620f5fe3.png)"></div>

<br><br>

<h1>第二种: object-fit和object-position </h1>

<img class="box" src="http://img6.cache.netease.com/m/2016/7/18/20160718170620f5fe3.png">

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航