---
tags: FD前端學習
---

# EP11__圖片RWD @media

{%hackmd @Limo470/image-scroll %}

## img圖片

img標籤的用法

`<img src="圖片位置" alt="圖片的描述文字">`

圖片位置
|#|img引入src位置|說明|
|-|-|-|
|🌍|絕對位置|超連結，使用網路圖片時使用。
|🗺|相對位置|本地關聯，就是相對於我們目前的檔案他在哪裡，假設換了一個資料夾相對位置 **`不會`** 整個壞掉|
|❌|沒有相對應檔案|出現圖片缺失縮圖+alt文字|

**alt**
圖片替代文字 (alternate text)，當圖片無法顯示時，瀏覽器會顯示此文字。這文字說明對 SEO 也很有助益，所以建議圖片都需要有 alt。

### 範例
<iframe height="400" style="width: 100%;" scrolling="no" title="img圖片大小" src="https://codepen.io/limo147/embed/abamwPG?default-tab=view%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/limo147/pen/abamwPG">
img圖片大小</a> by limo147 (<a href="https://codepen.io/limo147">@limo147</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 最大與最小寬度/高度
|-|-|-|
|-|-|-|
|with |預設寬度
|max-width |最大寬度，因此寬度不會超出該數值
|min-width |最小寬度，因此寬度不會小於該數值

### 圖片依比例縮放直到消失

    max-width: 200px;
    width: 100%;
    height: auto;

>codepeniframe url: default-tab=result%1Cresul 初始為結果/滿版

<iframe height="300" style="width: 100%;" scrolling="no" title="圖片依比例縮放直到消失" src="https://codepen.io/limo147/embed/KKRJLvo?default-tab=result%1Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/limo147/pen/KKRJLvo">
圖片依比例縮放直到消失</a> by limo147 (<a href="https://codepen.io/limo147">@limo147</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### <img> 其他屬性 (attributes)

**width**
一個整數值，指定圖片寬度像素 (pixels)，有指定的好處是可以避面頁面渲染時的跳動，因為瀏覽器不用等圖片下載完才能計算圖片寬度。

**heigh**
一個整數值，指定圖片高度像素 (pixels)，有指定的好處是可以避面頁面渲染時的跳動，因為瀏覽器不用等圖片下載完才能計算圖片高度。

**title**
可以指定一段文字，在當滑鼠滑過圖片時，會自動顯示這段文字。

<b>

</b>

## RWD width


> https://ithelp.ithome.com.tw/articles/10196578

|設定不同螢幕寬度該套用的樣式規則CSS||說明|
|-|-|-|
|@media (max-width: 576px){ ... } |先切電腦|表示這個數字以下（包含） 的都適用。(<=)
|@media (min-width: 576px){ ... } |先切手機|表示這個數字以上（包含） 的都適用。(>=)



max-width，表示這個數字以下（包含） 的都適用。(<=)
min-width，表示這個數字以上（包含） 的都適用。(>=)

❤該設定的寬度，不會大於該最大寬度，**`最大寬度以下`**
>pc first，media query 會變成這樣寫：
由大到小

|裝置|寬度|css|
|-|-:|-:|
|電腦|≤1440px|@media (max-width: 1440px) {...}|
|電腦|≤1200px|@media (max-width: 1200px) {...}|
|平板|≤992px|@media (max-width: 992px) {...}|
|平板 |≤768px|@media (max-width: 7680px) {...}|
|手機 |≤576px|@media (max-width: 576px) {...}|

💙該設定的寬度，不會小於該最小寬度，*`最小寬度以上`*
>mobile first，media query 會變成這樣寫：
由小到大

|裝置|寬度|css|
|-|-:|-:|
|手機 |≥576px|@media (min-width: 576px) {...}|
|...|...|@media (min-width: 576px) {...}|
|電腦|≥1440px|@media (min-width: 1440px) {...}|
|電腦|≥1920px|@media (min-width: 1920px) {...}|

<iframe height="300" style="width: 100%;" scrolling="no" title="@media" src="https://codepen.io/limo147/embed/JjaRMyz?default-tab=view%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/limo147/pen/JjaRMyz">
@media</a> by limo147 (<a href="https://codepen.io/limo147">@limo147</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>


<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/limo147/embed/zYJKRvg?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/limo147/pen/zYJKRvg">
Untitled</a> by limo147 (<a href="https://codepen.io/limo147">@limo147</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

https://codepen.io/Green-Blue-the-bashful/pen/mdNoYWp

https://creativemarket.com/delightful.design/2798793-UI-Kit-Lombok#fullscreen

https://creativemarket.com/delightful.design/3076789-UI-Kit-Freight#fullscreen

` <input value="123" placeholder="請輸入" class="input-default">`

https://www.behance.net/gallery/109770467/kos-eCommerce

https://mir-s3-cdn-cf.behance.net/project_modules/fs/4a09a6109770467.5fdb4386943a2.png
<!--  -->

<!--  -->

<!--  -->
<!--  -->
<!--  -->
<!--  -->