img标签只显示图片中间区域

最新推荐文章于 2024-12-12 16:41:47 发布

℡猜不透ㄨ

最新推荐文章于 2024-12-12 16:41:47 发布

阅读量1.2w

点赞数 12

分类专栏：前端（HTML、CSS）

本文链接：https://blog.csdn.net/CSDNLiYH/article/details/88645564

版权

前端（HTML、CSS）专栏收录该内容

1 篇文章

订阅专栏

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>