文章目錄
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>