Html、CSS基礎 – 圖片放置:

更新 發佈閱讀 10 分鐘

※ 常見圖片放置方式介紹:

第一種:

raw-image

第二種:

raw-image

第三種:

raw-image

第四種:

raw-image

※ 討論圖片放置方式的目的:

raw-image

※ Background屬性:

raw-image

※ Background背景屬性設定:

raw-image

※ Background使用時機:

raw-image

※ Background標籤和Image標籤比較:

raw-image

※ 圖片放置範例:

1.建立image_example專案:

raw-image

index.html

<body>
<!-- 依照圖片屬性 -->
<h2>依照圖片原本的範例</h2>
<img src="images/potrait.jpg" alt="">

</body>

成果顯示:

raw-image

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%;*/
}

成果顯示:

raw-image

※ 用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;
}

成果顯示:

raw-image

※ 放置多張圖片:

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;
}

成果顯示:

raw-image

※ 用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;
}

成果顯示:

raw-image

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%;
}

成果顯示:

raw-image

※ 固定比例圖框:

raw-image


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%;
}

成果顯示:

raw-image

固定比例圖片容器的實作說:

建立圖片容器:

  • 首先,我們需要一個包覆圖片的容器(image container),這個容器會用來控制圖片的比例。

利用偽元素產生固定比例空間:

  • 在容器內使用:before 偽元素,透過 padding-top 來推擠出一個固定比例的空間

設定容器寬度作為參考基準:

  • 容器的寬度是比例計算的基準,例如設定為 或固定像素。

圖片絕對定位覆蓋容器:

  • 圖片本身使用 position: absolute,並設定 top: 0; left: 0; width: 100%; height: 100%,讓它完全覆蓋在偽元素所撐出的比例區塊上。





















留言
avatar-img
留言分享你的想法!
avatar-img
奧莉薇走在成為後端工程師之路上
23會員
167內容數
全端網頁開發專業知識分享
2025/08/16
※ 成果範例: ※ 範例實作: 1.建立navbar_example專案: 2.建立navbar:index.html <!-- Start header --> <header class="header"> <div class="navbar"> <div clas
Thumbnail
2025/08/16
※ 成果範例: ※ 範例實作: 1.建立navbar_example專案: 2.建立navbar:index.html <!-- Start header --> <header class="header"> <div class="navbar"> <div clas
Thumbnail
2025/08/15
※ 成果範例: ※ 範例實作: 1.建立page-layout_example專案: 2.建立基礎結構:index.html <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <title>Page La
Thumbnail
2025/08/15
※ 成果範例: ※ 範例實作: 1.建立page-layout_example專案: 2.建立基礎結構:index.html <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <title>Page La
Thumbnail
2025/08/12
※ Layout佈局介紹:網頁畫面整體的框架 設計稿解構: 佈局: header:表頭 main:主要內容 footer:表尾 row:列 colum:行 元件: 欄位: 排版屬性: ※ Inline– Block範例: 1.建立layout_example專案: 2.建立
Thumbnail
2025/08/12
※ Layout佈局介紹:網頁畫面整體的框架 設計稿解構: 佈局: header:表頭 main:主要內容 footer:表尾 row:列 colum:行 元件: 欄位: 排版屬性: ※ Inline– Block範例: 1.建立layout_example專案: 2.建立
Thumbnail
看更多
你可能也想看
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
浮動(float)是早期用來創建佈局的技術。元素可以向左或向右浮動,旁邊的元素會環繞浮動元素。浮動元素通常用於圖文混排或簡單的兩欄佈局。
Thumbnail
浮動(float)是早期用來創建佈局的技術。元素可以向左或向右浮動,旁邊的元素會環繞浮動元素。浮動元素通常用於圖文混排或簡單的兩欄佈局。
Thumbnail
本章介紹了 CSS 中的顏色和背景屬性,包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置,以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
Thumbnail
本章介紹了 CSS 中的顏色和背景屬性,包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置,以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
Thumbnail
將圖片添加到PDF文件中可以提升內容質量,使其更具吸引力。無論您是在製作專業文件、報告或演示文稿,插入圖片都是非常重要的。以下是使用各種工具進行操作的方法
Thumbnail
將圖片添加到PDF文件中可以提升內容質量,使其更具吸引力。無論您是在製作專業文件、報告或演示文稿,插入圖片都是非常重要的。以下是使用各種工具進行操作的方法
Thumbnail
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外,還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後,介紹了如何引入和使用 Google 字體,以提高網頁的排版效果。
Thumbnail
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外,還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後,介紹了如何引入和使用 Google 字體,以提高網頁的排版效果。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News