img标签只显示图片中间区域1.背景图显示正方形效果的做法2.img标签src显示正方形效果的做法

59 阅读 0 评论 39 点赞

我是靠谱客的博主秀丽棉花糖，最近开发中收集的这篇文章主要介绍img标签只显示图片中间区域1.背景图显示正方形效果的做法2.img标签src显示正方形效果的做法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

img标签显示图片中间区域

1.背景图显示正方形效果的做法
2.img标签src显示正方形效果的做法
- object-fit属性

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>