我正在为wordpress开发HTML5模板。实际上，我愿意向不同的分辨率/设备展示不同的图像（实际上是相同的作物），关心他们占据所有的上层区域。 要做到这一点，我使用的元素看起来绝对有效，直到我需要在表单中键入内容。这看起来像更改分辨率或类似的东西，导致显示的图像发生变化。我不希望这种情况发生。
html代码：
<picture>
<source media="screen and (device-width:320px) and (orientation:portrait)" srcset="img/nature-wallpaper-320x450.jpg" />
<source media="screen and (device-width:480px) and (orientation:landscape)" srcset="img/nature-wallpaper-450x320.jpg" />
<source media="(max-width:360px) and (orientation:portrait)" srcset="img/nature-wallpaper-360x600.jpg" />
<img src="img/nature-wallpaper-870.jpg" class="img-responsive" />
</picture>
img元素中的img-responsive类来自Bootstrap;最后我应该说我的head有这个元标记：
<meta name="viewport" content="width=device-width">
那么，我该如何防止这种行为呢？谢谢。