Javascript 以一种不需要'；t导致浏览器回流过慢的连接（首选HTML）

对于我的一个web应用程序，我希望提供给用户的图像能够响应。此外，我还希望在图像标记中指定

宽度

和

高度

属性，这样在移动连接速度较慢时，就不会出现浏览器回流

这两种需求是否都可以通过使用纯HTML实现

如果确实有可能的话，最好给出一个说明性的答案，说明工作示例。第二个纯JS（无库）答案也很受欢迎（但我主要关注的是通过轻量级HTML实现这一点）

注意：这来自一个类似的问题，它依赖于JQuery（我不熟悉的东西），因此不符合我的要求

---

---

背景：对于移动响应设计，通常指定宽度（或最大宽度），并将高度定义为

auto

。这将与

宽度

和

高度

值发生冲突（并与之相反）。这就是我的问题

值得一提的是，这里有一个香草版的

//将节点列表转换为数组：
var imageList=Array.prototype.slice.call(
document.getElementsByTagName（'img'））
);
imageList.forEach（函数（img）{
//仅对设置了w+h属性的图像执行操作：
if（img.getAttribute（“宽度”）和&img.getAttribute（“高度”））{
//计算所需高度（以像素为单位）
var scaledHeight=img.getAttribute（“高度”）*img.clientWidth/img.getAttribute（“宽度”）；
//将图像包装到具有该高度的元素中
var wrapper=document.createElement（'span'）；
setAttribute（“样式”，“高度：”+scaledHeight+“px；显示：内联块”）；
insertBefore（包装器，img）；
附加子对象（img）；
}
});
img{
最大宽度：100%；
高度：自动；
}
/*这样你就可以看到它在做什么：*/
span{border:1px solid}

（另一个问题的答案可以很容易地改写成vanilla JS…@CBroe：我不知道JQuery，所以我无法将其翻译成vanilla JS。我主要是一名服务器端开发人员，具有基本的HTML和JS知识。@CBroe:是的，我也不想在JS中这样做。我尝试了类似于
的方法来让图像响应。现在，如果我加上
宽度
和
高度
属性，我就会失去响应能力（但解决了浏览器回流的问题）。我想启用这两个需求，最好是纯HTML。你是不是建议我试试
宽度：auto
？如果能得到一个说明性的例子就好了。谢谢你的帮助，我想让它转一转。我希望一个纯HTML的解决方案是可能的——我在想一些可能利用
flex
的东西。但很公平。我真的不确定是否有非js方法，我会饶有兴趣地关注这个问题，看看是否有比我更了解的人出现。。。对我来说有点神秘，浏览器不会自动完成这项工作。