html - html img src の使用?パラメータ

Question

同じ画像に 3 つの異なるサイズがあります。

次のようなことを達成できますか。

<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

Answer 1

ブラウザはあなたが何をしようとしているのか理解していません。次のように、画像の最後にサイズを追加してみませんか。

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

Answer 2

次のようなパスから同じ画像を 3 回呼び出すのではなく、同じ画像を保持し、それぞれに css スタイルを追加することをお勧めします。

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

Answer 3

私は提案します

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

ファイル拡張子を保持します。