※ 常見圖片放置方式介紹：
第一種：
第二種：
第三種：
第四種：
※ 討論圖片放置方式的目的：
※ Background屬性：
※ Background背景屬性設定：
※ Background使用時機：
※ Background標籤和Image標籤比較：
※ 圖片放置範例：
1.建立image_example專案：
index.html：
<body>
<!-- 依照圖片屬性 -->
<h2>依照圖片原本的範例</h2>
<img src="images/potrait.jpg" alt="">
</body>
成果顯示：
index.html：
<body>
<!-- 依照圖片屬性 -->
<h2>依照圖片原本的範例</h2>
<!-- 外層容器，可以用來控制整體圖片區塊的排版 -->
<div class="image-container">
<!-- img包在容器裡，可以針對容器和圖片分別設定 CSS，避免直接對 操作造成不必要的影響。 -->
<img src="images/potrait.jpg" alt="">
</div>
<div class="image-container">
<img src="images/landscape.jpg" alt="">
</div>
</body>
style.css：
/* Globel */
* {
box-sizing: border-box;
position: relative;
}
/* Original 原始設定*/
/* img{
width: 300px;
height: 300px;
} */
/* 針對外框設定 */
.image-container {
/* 強制做4:3形式 */
width: 400px;
height: 300px;
border: 1px solid #000;
/* 將圖片超出的部分做強制隱藏 */
overflow: hidden;
}
/* 外框內的img做設定 */
.image-container img {
width: 100%;
/*height: 100%;*/
}
成果顯示：
※ 用cover解決4:3圖片放置的困境：
index.html：
<body>
<!-- Cover -->
<h2>用background屬性放置圖片（cover）：</h2>
<div class="bg-image"></div>
</body>
style.css：
/* Background(cover) */成果顯示：
.bg-image {
/* 強制做4:3形式 */
width: 400px;
height: 300px;
border: 1px solid #000;
background-image: url('../images/potrait.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
※ 放置多張圖片：
index.html：
<!-- Cover -->
<h2>用background屬性放置圖片（cover）：</h2>
<!-- 讓圖片路徑保持在HTML上 -->
<div class="bg-image" style="background-image: url(./images/potrait.jpg);"></div>
<div class="bg-image" style="background-image: url(./images/landscape.jpg);"></div>
style.css：
/* Background(cover) */
.bg-image {
/* 強制做4:3形式 */
width: 400px;
height: 300px;
border: 1px solid #000;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
成果顯示：
※ 用Contain解決4:3圖片放置的困境：
index.html：
<!-- Contain 常使用在logo-->
<h2>用background屬性放置圖片（contain）：</h2>
<a href="#!" class="logo1">
<!-- 網頁的重要資訊 -->
<h1>公司的名稱</h1>
</a>
style.css：
/* logo */
.logo1 {
/* 基準線向上對齊的歸零調整 */
display: inline-block;
vertical-align: top;
width: 120px;
height: 48px;
border: 1px solid #000;
background-image: url('../images/logo.svg');
background-repeat: no-repeat;
/* 希望整個商標顯示出來 */
background-size: contain;
/* 文字調整 */
/* 不換行設定 */
white-space: nowrap;
/*文字向右移動 */
/*參考值是上面的寬度*/
text-indent: 100%;
/* 隱藏超出部分 */
overflow: hidden;
}
成果顯示：
logo2寫法：
index.html：
<a href="#!" class="logo2">
<!-- 網頁的重要資訊 -->
<img src="images/logo.svg" alt="公司的名稱">
</a>
style.css：
.logo2 {
/* 基準線向上對齊的歸零調整 */
display: inline-block;
vertical-align: top;
width: 120px;
height: 48px;
border: 1px solid #000;
}
/* 用高度去做填滿 */
.log2 img {
height: 100%;
}
成果顯示：
※ 固定比例圖框：
index.html：
<!-- 固定比例圖框 -->
<h2>固定的圖片框:</h2>
<!-- 外層結構 -->
<div class="outter">
<!-- 建立基礎結構 -->
<div class="fm-image-container">
<div class="image"></div>
</div>
</div>
style.css：
/* frame圖片框 */
.outter {
width: 50%;
border: 5px solid blue;
}
.fm-image-container {
width: 100%x;
border: 5px solid #000;
}
.fm-image-container:before {
content: '';
display: block;
width: 100%;
/* 上下推擠 padding依照寬度值去做比例上調整*/
padding-top: 75%;
border: 5px solid green;
}
.fm-image-container .image {
border: 1px solid red;
/* 因為權重關係所以可以取消 */
/* width: 200px;
height: 150px; */
background-image: url('../images/potrait.jpg');
background-repeat: no-repeat;
background-size: cover;
/* 絕對定位 */
position: absolute;
/* 強制到左上角 */
top: 0;
left: 0;
/* 將本元件覆蓋到image container */
width: 100%;
height: 100%;
}
成果顯示：
固定比例圖片容器的實作說：
建立圖片容器：
- 首先，我們需要一個包覆圖片的容器（image container），這個容器會用來控制圖片的比例。
利用偽元素產生固定比例空間：
- 在容器內使用:before 偽元素，透過 padding-top 來推擠出一個固定比例的空間
設定容器寬度作為參考基準：
- 容器的寬度是比例計算的基準，例如設定為 或固定像素。
圖片絕對定位覆蓋容器：
- 圖片本身使用 position: absolute，並設定 top: 0; left: 0; width: 100%; height: 100%，讓它完全覆蓋在偽元素所撐出的比例區塊上。
