如何在不损失质量的情况下针对不同的img元素宽度使用相同的图像？

Question

我在多个宽度上都具有相同的图像，例如balloon-35.webp，balloon-40.webp，balloon-90.webp。

我也有多个img元素，它们的宽度不同，例如<img width="35"/>，<img width="40"/>，<img width="90"/>。

我能否为具有上述3个文件的每个srcset指定img属性，并让img元素根据width属性选择正确的文件？例如，如果img的宽度为35，则选择35文件。

还是我唯一的选择，就是根据宽度用正确的文件更改src属性？还是有其他方法可以实现我想要的？

干杯！

Answer 1

这里是代码段代码，我为您设计了只需在图像数组中输入图像URL即可提及imagesUrls = ['balloon-35.webp'，'balloon-40.webp'，'balloon-90 .webp'];。 url的值应仅是最后7个字符40.webp等，应与您在上面的描述中提到的相同。

var a = document.getElementsByTagName("a");

function stups(){

  var tagWidth = a[0].getAttribute("width");
  document.getElementById("demo").innerHTML = tagWidth;
  console.log(tagWidth);
var src = "";
var imagesUrls = ['balloon-35.webp', 'balloon-40.webp', 'balloon-90.webp'];

for (var img of imagesUrls)
 {
var width = img.substr(img.length - 7);
var widthValue = width.substring(0, 2);
if (tagWidth.substring(0, 2) === widthValue){
  src = img;
 }
}
console.log(src);
document.getElementById("imageClass").src = src;
}

<BUTTON ONCLICK="stups()">VALUE FINDER </BUTTON>
<a value="this is a value" width="35px" href="value"><img id="imageClass" src=""> values rule!!</a>
<p id="demo"></p>

请帮我，如果您认为我对您有好处。干杯！