html img src使用<filename>？參數

我對同一圖像有3種不同的尺寸。html img src使用<filename>？參數

我能實現類似如下：

<img src='/path/to/image.jpg'></img> 
<img src='/path/to/image.jpg?small'></img> 
<img src='/path/to/image.jpg?large'></img>

我已經嘗試了以上，但它卻顯示image.jpg

來源

2013-02-15 rikAtee

''元素是一個空元素;因此它沒有結束標籤;它會自動關閉（標籤末尾的'/'） – 2013-02-15 23:10:09

是的，你可以實現這樣的事情，你遇到了哪個問題？你在服務器上做了什麼？ – 2013-02-15 23:10:41

你試過直接訪問url嗎？：//youdomain.com/path/to/image.jpg？小，以確保你期望發生的事情發生？ – 2013-02-15 23:14:52

的瀏覽器不明白你想要做什麼。爲什麼大小不追加到圖像的結尾，就像這樣：

<img src='/path/to/image.jpg></img> 
<img src='/path/to/image.jpg_small></img> 
<img src='/path/to/image.jpg_large></img>

來源

2013-02-15 23:09:57 mchandleraz

-1

我建議

<img src="/path/to/image.jpg"></img> 
<img src="/path/to/image_small.jpg"></img> 
<img src="/path/to/image_large.jpg"></img>

保持文件擴展名。

來源

2013-02-15 23:12:00 smartmeta

我會建議保持相同的圖像，並添加一些CSS風格各一，而不是從它的路徑類似調用同一個圖像的3倍：

HTML代碼

<div> 
    <img src="/path/image.jpg" width="100" height="100"> 
</div> 

<div id="scale-up" style="height: 230px"> 
    <img src="/path/image.jpg"> 
</div> 

<div id="scale-down" style="height: 57px"> 
    <img src="/path/image.jpg">

CSS代碼

img { 
    vertical-align: middle; 
    height: 100%; 
} 
#scale-up { 
    height: 230px; 
} 
#scale-down { 
    height: 57px; 
}

來源

2013-02-16 00:26:01 Leo

小將用於最經常（99％的時間）。大用一次，中等不常用。 – rikAtee 2013-02-16 02:11:31

@rikAtee我沒有明白你的觀點，你能指出更多嗎？ – Leo 2013-02-16 05:25:13

大部分（99％）的用戶只需要看到縮略圖圖像，所以我不想爲他們提供全尺寸的圖像，因爲這會花費我的帶寬。 – rikAtee 2013-02-16 20:27:00

如果你想文件名看起來像（在服務器上）：

fd11f91bb8361030bdc09d8b8ed4f88e?w=200&h=76&f=png

您需要在向服務器請求時進行url編碼。例如使用http://meyerweb.com/eric/tools/dencoder/

所以URL編碼的文件看起來像：

fd11f91bb8361030bdc09d8b8ed4f88e%3Fw%3D200%26h%3D76%26f%3Dpng

所以你的情況應該是：

<img src='/path/to/image.jpg'></img> 
<img src='/path/to/image.jpg%3Fsmall'></img> 
<img src='/path/to/image.jpg%3Flarge'></img>

來源

2017-03-11 11:51:37

像@Leo提到的，使用HTML標籤（或CSS ）比基於URL的方法容易得多。（這需要服務器邏輯）

的HTML標籤大小調整會是什麼樣子：

<img src="/path/to/image.jpg" width="100" height="100">

你提到你不喜歡怎麼可能會增加帶寬使用率。只要您的網站使用圖像緩存，這應該不成問題。（它只會下載一次圖像，然後在本地重新調整不同標記的圖像大小）

來源

2017-03-11 11:58:38 Venryx

html img src使用<filename>？參數

回答

相關問題