在HTML中的兩個尺寸相同的圖片

我有一個大屏幕和另一個小屏幕的img。這是一個簡單的選擇，如果有用，但我不確定是否有一個很好的做法，把相同IMG在HTML中的不同大小，並隱藏一個顯示無？這個選項還有其他問題嗎？在HTML中的兩個尺寸相同的圖片

CSS：

#small { 
    display:none; 
} 

@media screen and (max-width: 630px) { 
#big { display:none; } 
#small { display:block; } 
}

HTML：

<img id="big" src="img/1-big.jpg"> 
<img id="small" src="img/1-small.jpg">

來源

2016-03-23 segon

根據您的瀏覽器兼容性的要求，畫面元素可能是你需要的東西：https://developer.mozilla.org/en/docs/Web/HTML/Element/picture – LDJ

可能重複：HTTP：/ /stackoverflow.com/q/32161026/3597276 –

我看不出有什麼問題。事實上，減少頁面加載時間和在移動設備上保持頁面大小的方式是一種公認的技術（當然，只提供您的設備尺寸所需的任何圖像）。

另外還要注意，作爲唯一潛在的缺陷，我可以這樣看，就是簡單地設置CSS屬性display: none並不總是防止圖像加載（在這裏看到：Does "display:none" prevent an image from loading?）

這個替代將圖像保存爲相同的名稱和一個小的或沒有後綴（對於較大的圖像）添加到他們（幾乎就像你在你的例子中），除了在任何時候在屏幕上只有1個HTML元素和使用javascript修改路徑。例;

// HTML ELEMENT 
<img class='thumbnail' src='img/thumb.png'> 

// JAVASCRIPT 
if(window.innerWidth < 640){ 
    // This is for users with smaller screens, load the smaller image 
    var imgs = document.getElementsByTagName('img'); 

    for(var i = 0; i < imgs.length; i++){ 
    var current = imgs[i].getAttribute('src'); 
    imgs[i].setAttribute('src', current + '-small.png'); 

    // THIS WOULDN'T WORK AS IS, AS IT WOULD PRODUCE '.png-small.png' 
    // AND IS INTENDED **ONLY** TO ILLUSTRATE A CONCEPT 
    } 
}

來源

2016-03-23 15:30:31 Lewis

IMUO我覺得這是不是一個好的做法，因爲要加載所有圖像兩次（或隱藏然後）。如果您使用的引導（或響應頁面），你可以使用類img-responsive或本：

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

或者，如果沒有，你可以這樣做：

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

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

做這樣一來，你只加載圖像需要時避免加載兩次圖像。另一個例子作爲背景圖片：https://www.smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/

來源

2016-03-23 15:27:44

我更喜歡那個代碼。但我已經讀過背景img應該只用於裝飾目的。如果img有意義，它應該在html中，並在alt屬性中加上描述。 – segon

這是真的。但我會推薦（再次）像img-responsive這樣的風格。您只需加載一次圖像，即可在各種尺寸的瀏覽器中輕鬆地進行響應（不僅在突破點上）。如果您有響應式頁面，那麼它是最好的選擇。 –

在HTML中的兩個尺寸相同的圖片

回答

相關問題