媒体查询动态添加的图像

Media queries for dynamically added images

本文关键字：图像 添加 动态 查询 媒体      更新时间：2023-09-26

我使用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和#map1div具有固定的大小，与我现在拥有的jpeg图像的大小相匹配，并且在台式机/笔记本电脑大小的屏幕上看起来很好。但是，我想使用媒体查询在较小的屏幕上呈现相同的页面。我知道如何对页面上的其他所有内容做同样的事情，但我如何根据屏幕大小改变这些动态添加的图像的大小?

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

img {width: 100%;}

把它括在媒体查询语句中，这样它就只适用于你想要的地方了

添加到你的样式表

img{max-width:100%;}
相关文章：