图像无法在移动设备上正确显示

【问题标题】：Images won't display properly on mobile devices图像无法在移动设备上正确显示
【发布时间】：2018-09-28 01:07:36
【问题描述】：

我有一个网站，我正在努力使其更适合移动设备 (http://realnewsline.com/)。我遇到的问题是网站顶部的三个主要图像在移动设备上被截断，其中一两个变得无法查看。有什么办法可以在 Wordpress 或一些 CSS 中解决这个问题？谢谢！

【问题讨论】：

欢迎来到 Stack Overflow！请带上tour 并通读help center，特别是如何提问。你最好的选择是做你的研究，搜索关于 SO 的相关主题，然后试一试。在进行更多研究和搜索后，发布您的尝试Minimal, Complete, and Verifiable example，并具体说明您遇到的问题，这可以帮助您获得更好的答案。

标签： wordpress mobile responsive-design

【解决方案1】：

首先，您的.image-wrap div 有一个内联样式属性，将宽度设置为 300 像素。如果删除它，图像将缩放以适合设备。

为避免列变小时从屏幕上消失，您可以将它们换行成行。目前，.featured-wrap 元素的宽度设置为 33%（通过body #wrapper #featured .featured-wrap）和 100%（在.featured-wrap）。我建议在其父元素 (#featured) 上使用 display: flex; flex-wrap: wrap; 属性，给 .featured-wrap 元素一个绝对值（比如 300px，确保删除其他宽度属性）。

这里是关于 flex 显示模式的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 我觉得它非常有用。

【讨论】：