img标签只显示图片中间区域: 通过设置object-fit属性实现(适用于可替换元素,像img video iframe这些)
cover:图片填充满父节点,超出部分隐藏,仅显示中间。
contain:图片根据父节点宽高等比例缩放。
①背景图
<!-- 背景图实现图片居中 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图的做法</title>
<style>
.images{
background-image: url("背景图的链接");
background-repeat: no-repeat;
background-position:center center;
background-size: cover;
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<h3>背景图的做法</h3>
<img class="images" />
</body>
</html>
②img标签
<!-- img标签src实现图片居中 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img标签src的做法</title>
<style>
.images{
width: 80px;
height: 80px;
object-fit: cover;
}
</style>
</head>
<body>
<h3>img标签src的做法</h3>
<img class="images" />
</body>
</html>
