不久前，在这个社区的帮助下，我能够使用 div 类和标签在我的博客文章中设置我的图像以显示/隐藏桌面和移动设备<picture>，并且还研究了如何设置特定的 amp-img桌面与移动，因为 div 类不适用于 amp 页面。
我并不总是使用这些，但是当我需要在不同的位置为桌面和移动设备显示图像时，或者如果我有两个版本的相同图像我想在同一个位置显示时，它很有用（例如，在段落之间），但我希望它们具有一定的纵横比，具体取决于某人使用的设备。
我曾经使用 CSS 媒体查询，但它变得非常混乱并且添加了太多工作。并且有人建议我不要对 amp 图像使用 CSS 媒体查询。
以下是我的图像现在如何输入到我的博客文章中的示例：
我使用它在桌面上的一个位置显示图像（此博客文章中的第二张图像：https ://www.smartfertilitychoices.com/inositol-pcos/ ）：
<div class="hidden-sm hidden-xs">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(min-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="alignright" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img class="alignright" media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325>
</amp-img>
这是为了在移动设备上显示相同的图像，只是在博客文章中的不同位置：
<div class="hidden-md hidden-lg">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(max-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="aligncenter" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img media="(max-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325 layout="responsive">
</amp-img>
当我希望两个不同的图像在桌面和移动设备上的同一个位置时，我会使用它（上面链接的博客文章中的第三个图像）：
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-8.jpg" media="(min-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" class="aligncenter" alt="Inositol and PCOS">
</picture>
<amp-img media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-8.jpg" width=750 height=293 layout="responsive">
</amp-img>
<amp-img media="(max-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" width=390 height=325 layout="responsive">
</amp-img>
自从 Wordpress 上周更新以来，我现在无法“更新”我的博客文章而不删除部分 html（<picture>标签和标签<amp-img>。这种情况发生在整个网站范围内，用于各种嵌入式内容，如注册表单和视频（javascript + html）和我已经通过对这些事情使用简码解决了这个问题。我已经测试过，如果我将图像 html 输入到简码创建器中，然后在博客文章中使用简码，简码将几乎完美地工作。但是这个额外的步骤只是创建不必要的工作，如果存在，我希望有一种更简单的方法来做到这一点。
以下是哪些部分消失以及消失时会发生什么的示例：
<div class="hidden-sm hidden-xs">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(min-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="alignright" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img class="alignright" media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325>
</amp-img>
变成
<div class="hidden-sm hidden-xs">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="alignright" alt="Inositol and PCOS" width="390" height="325">
</div>
和
<div class="hidden-md hidden-lg">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(max-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="aligncenter" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img media="(max-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325 layout="responsive">
</amp-img>
变成
<div class="hidden-md hidden-lg">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="aligncenter" alt="Inositol and PCOS" width="390" height="325">
</div>
- 以上两个例子都意味着图像将在博文的 amp 版本中显示两次，但对于常规的非 amp 版本将继续正常工作。
最后，这个：
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-8.jpg" media="(min-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" class="aligncenter" alt="Inositol and PCOS">
</picture>
<amp-img media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-8.jpg" width=750 height=293 layout="responsive">
</amp-img>
<amp-img media="(max-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" width=390 height=325 layout="responsive">
</amp-img>
变成：
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" class="aligncenter" alt="Inositol and PCOS">
- 这意味着图像只有一个变体显示 /inositol-and-pcos-7.jpg（移动版）。我知道解决这个问题的一种方法是在这个地方只拥有图像的桌面版本，但如果可能的话，我宁愿不必在移动设备上这样做。我在其他博客文章中为桌面设置了其他宽幅图像，其中包含文本，一旦它们被压缩到移动尺寸，就很难阅读这些图像。
如果有人对将图像嵌入博客文章的其他方法有任何见解，可以显示/隐藏桌面与移动 + 尤其是放大器图像。谢谢！