18选7最新开奖结果查询:css 響應式圖片布局設計讓手機上自適應電腦也不改變大小

這是加好的css圖片響應式布局代碼

響應式網站設計為了讓css圖片布局適應手機訪問,需要在css3代碼中添加 img {max-width:100%;height:auto;} 加入這個代碼后,圖片無論在什么設備上顯示都完美呈現。

響應式 Web 設計 - 圖片

使用 width 屬性

18选7走势图300期 www.gcfyd.icu 如果 width 屬性設置為 100%,圖片會根據上下范圍實現響應式功能:

實例

img {
    width: 100%;
    height: auto;
}

注意在以上實例中,圖片會比它的原始圖片大。我們可以使用 max-width 屬性很好的解決這個問題。


使用 max-width 屬性

如果 max-width 屬性設置為 100%, 圖片永遠不會大于其原始大?。?/p>

實例

img {
    max-width: 100%;
    height: auto;
}

網頁中添加圖片

實例

img {
    width: 100%;
    height: auto;
}

背景圖片

背景圖片可以響應調整大小或縮放。

以下是三個不同的方法:

1. 如果 background-size 屬性設置為 "contain", 背景圖片將按比例自適應內容區域。圖片保持其比例不變:

 

這是 CSS 代碼:

實例

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
}

 

2. 如果 background-size 屬性設置為 "100% 100%" ,背景圖片將延展覆蓋整個區域:

 

實例

這是 CSS 代碼:

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}

 

3. 如果 background-size 屬性設置為 "cover",則會把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。注意該屬性保持了圖片的比例因此 背景圖像的某些部分無法顯示在背景定位區域中。

 

這是 CSS 代碼:

實例

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}

 

不同設備顯示不同圖片

大尺寸圖片可以顯示在大屏幕上,但在小屏幕上確不能很好顯示。我們沒有必要在小屏幕上去加載大圖片,這樣很影響加載速度。所以我們可以使用媒體查詢,根據不同的設備顯示不同的圖片。

以下大圖片和小圖片將顯示在不同設備上:

 

實例

/* For width smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg'); 
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body { 
        background-image: url('img_flowers.jpg'); 
    }
}

 

你可以使用媒體查詢的 min-device-width 替代 min-width 屬性,它將檢測的是設備寬度而不是瀏覽器寬度。瀏覽器大小重置時,圖片大小不會改變。

實例

/* 設備小于 400px: */
body {
    background-image: url('img_smallflower.jpg'); 
}

/* 設備大于 400px (也等于): */
@media only screen and (min-device-width: 400px) {
    body { 
        background-image: url('img_flowers.jpg'); 
    }
}

 

HTML5 <picture> 元素

HTML5 的 <picture> 元素可以設置多張圖片。

瀏覽器支持

元素          
<picture> 不支持 38.0 38.0 不支持 25.0

<picture> 元素類似于 <video> 和 <audio> 元素??梢隕璞覆煌淖試?,第一個設置的資源為首選使用的:

實例

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

 

srcset 屬性的必須的,定義了圖片資源。

media 屬性是可選的,可以在媒體查詢的 CSS @media 規則 查看詳情。

對于不支持 <picture> 元素的瀏覽器你也可以定義 <img> 元素來替代。

css 響應式圖片原文鏈接來自:https://www.runoob.com/css/css-rwd-images.html