Css 使用类激活图片标记中的特定图像

我正在使用图片标签在两个图像之间切换。图像1为240x240，当窗口为32em及以上时显示。图2为112x112，低于32em时显示

我正在尝试应用一个类。活动到div，因此图像1将显示，图像2将隐藏

<div>
    <picture>
        <source media="(min-width: 32em)" srcset="http://via.placeholder.com/240x240/AEAEAE/000000?text=Ambassador+Image+(240x240)">
        <img src="https://via.placeholder.com/112x112"/>
    </picture>
</div>

---

我不确定您对HTML的限制是什么，但如果可能的话，我建议直接在div中使用两个

img

节点，并将CSS放在

样式

节点中

例如：

#img240{
宽度：240px；
高度：240px；
}
#img112{
显示：无；
宽度：112px；
高度：112px；
}
@介质（最大宽度：32em）{
#img240{
显示：无；
}
#img112{
显示：块；
}
}

---

我不确定您对HTML的限制是什么，但如果可能的话，我建议直接在div中使用两个

img

节点，并将CSS放在

样式

节点中

例如：

#img240{
宽度：240px；
高度：240px；
}
#img112{
显示：无；
宽度：112px；
高度：112px；
}
@介质（最大宽度：32em）{
#img240{
显示：无；
}
#img112{
显示：块；
}
}

---

图1显示的最小宽度为32em，图2显示的宽度低于32em，但div上没有活动类

---

图1显示的最小宽度为32em，图2显示的宽度低于32em，但div上没有活动类