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

我建议保留相同的图像并为每个图像添加一些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;
}

Answer 3

如果您希望文件名看起来像（在服务器上）：

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>

Answer 4

与@Leo提到的一样，使用html-tags（或css）比基于url的方法更容易。（这需要服务器逻辑）

html-tag大小调整如下：

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

您提到您不喜欢这可能会增加带宽使用量。只要您的网站在图像上使用缓存，这不应该成为问题。（它只会下载一次图像，并在本地为不同的标签调整相同的图像）

Answer 5

我建议

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

保留文件扩展名。

html img src使用<filename>？param </filename>

5 个答案: