javascript - 动态添加图像的媒体查询

Question

我使用这样的 js 代码在我的页面上动态添加了一些图像：

if (doorcount == 1) {
$("#doorframe").html('<img src="content/image/door2unopenedlight.jpg" />');
$("#map1").html('<img src="content/image/map2light.jpg" />')
}
else if (doorcount == 2) {
$("#doorframe").html('<img src="content/image/door3unopenedlight.jpg" />');
$("#map1").html('<img src="content/image/map3light.jpg" />')
}

等等。

#doorframe 和 #map1 div 具有固定大小，与我现在拥有的 jpeg 图像的大小相匹配，并且在台式机/笔记本电脑大小的屏幕上看起来都很好。但是，我想使用媒体查询在较小的屏幕上呈现相同的页面。我知道如何对页面上的其他所有内容执行相同的操作，但是如何更改这些动态添加的图像的大小以根据屏幕大小进行缩放？

Answer 1

您可以告诉图像缩放到包含元素的宽度。例如

img {width: 100%;}

只需将其包装在媒体查询中，使其仅适用于您想要的位置。

Answer 2

将此添加到您的样式表

img{max-width:100%;}