文章目录
1. map 图（图中图）
<a href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin" target="_blank">
<img usemap="#solorMap" src="./图/1.jpg" alt="solor">
</a>
<map name="solorMap">
<area shape="circle" coords="375,186,50" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank">
<area shape="circle" coords="518,186,40" href="https://baike.baidu.com/item/%E5%9C%9F%E6%98%9F/136354?fr=aladdin" target="_blank">
</map>
-
area的属性值：
![在这里插入图片描述]()
-
关于coords座标：
1. 圆形：shape="circle"，coords="x,y,z" 这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的座标）， r 是以像素为单位的圆 形半径。 2. 多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..." 每一对 "x,y" 座标都定义了多边形的一个顶点（"0,0" 是图像左上角的座标）。 定义三角形至少需要三组座标；高纬多边形则需要更多数量的顶点。 多边形会自动封闭，因此在列表的结尾不需要重复第一个座标来闭合整个区域。 3. 矩形：shape="rectangle"，coords="x1,y1,x2,y2" 第一个座标是矩形的一个角的顶点座标，另一对座标是对角的顶点座标，"0,0" 是图像左上角的座标。 请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
2. figure元素（有利于搜索引擎搜索）
指代，定义，通常用于把图片，图片标题，描述包裹起来
例：
<figure>
<a href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin" target="_blank">
<img usemap="#solorMap" src="./图/1 (2).jpg" alt="solor">
</a>
<figcaption>
<h2>太阳系</h2>
</figcaption>
<p>
太阳系是以太阳为中心，和所有受到太阳的引力约束天体的集合体。包括八大行星（由离太阳从近到远的顺序：水星、金星、地球、火星、木星、土星、天王星、海王星）、以及至少173颗已知的卫星、5颗已经辨认出来的矮行星，包括四个柯伊伯带天体，和数以亿计的太阳系小天体和彗星。
</p>
</figure>
3. inline属性
任何带有inline（inline-block也算）属性的元素都有文字特性
注：可以看一下四张图片有间隔，但是它不是 margin 或是 padding 引起的而是空格
<!-- 上图代码 -->
<body>
<img src="1.gif" alt="">
<img src="1.gif" alt="">
<img src="1.gif" alt="">
<img src="1.gif" alt="">
</body>
解决方案
在强调一遍是空格引起的
所以说可以消除img中间的空格达到其无间隙的效果
<body>
<img src="1.gif" alt=""><img src="1.gif" alt=""><img src="1.gif" alt=""><img src="1.gif" alt="">
</body>
4. 设置图片的位置
img{
position:absolute; <! 绝对位移>
left: x px;
top: y px;
}
</style>
4. 改变图片大小
1. width 和 height
1.不设置width和height，默认显示图片真实大小。
2.设置width或height中的一个，另一个按比例自动缩放。
3.设置width和height，显示指定大小。
2. transform:scale(n)
可以等比例放大缩小图片
3.object-fit
object-fit 属性由下列的值中的单独一个关键字来指定。
取值
- contain
被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
- cover
被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
- fill
被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
- none
被替换的内容将保持其原有的尺寸。
- scale-down
内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
5.让img自动适应div容器的大小
啥是自适应，按我的理解就是将图片按比例放缩（使图片不变形），并让其在盒子中居中。
1. 按比例缩放
- 定宽，高按比例缩放
div img {
width: 100%;
height: auto;
}
2. 居中
- flex居中（加在父元素身上）
div {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
- position定位
div {
position: relative;
}
div img {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
- position+transform
div img {
position: absolute;
right: 50%; /*右边界相对父容器在中间*/
bottom: 50%; /*下边界相对父容器在中间*/
transform: translateX(50%) translateY(50%); /*向右移动自身宽度的50%，向下移动自身高度的50%*/
}
3. 实例
- flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>让图片自动适应div容器大小</title>
<style>
div {
width: 400px;
height: 400px;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
/* 给盒子加一个边框 */
/* border: 1px solid black; */
}
div img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div>
<img src="./1/timg (2).gif" />
</div>
</body>
</html>
- positon
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>让图片自动适应div容器大小</title>
<style>
div {
width: 300px;
height: 600px;
/* 给盒子加一个边框 */
/*border: 1px solid black;*/
position: relative;
}
div img {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div>
<img src="1.gif" />
</div>
</body>
</html>