img标签显示图片中间区域
1.背景图显示正方形效果的做法
<!-- 背景图实现图片居中 -->
<!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>
注：
cover:图片填充满父节点，超出部分隐藏，仅显示中间。
contain:图片根据父节点宽高等比例缩放。
img无src会有默认边框，建议用div或者下面的方法
2.img标签src显示正方形效果的做法
<!-- 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>