0

对于同一张图片，我有 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

4

5 回答 5

1

浏览器不理解您要执行的操作。为什么不将大小附加到图像的末尾，如下所示：

<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-15T23:09:57.970 回答
0

我建议保留相同的图像并为每个图像添加一些 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-16T00:26:01.013 回答
0

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

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-11T11:51:37.670 回答
0

就像@Leo 提到的那样，在这里使用 html-tags (或 css) 比基于 url 的方法容易得多。（这需要服务器逻辑）

html-tag 调整大小如下所示：

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

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

于 2017-03-11T11:58:38.710 回答
-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-15T23:12:00.350 回答