移动设备上的左右 Img 边框被切断 - 强制移动设备显示图像 + 边框？答案

【问题标题】：Right & Left Img Borders Being Cut Off on Mobile - Force Mobile to Display Images + Borders?移动设备上的左右 Img 边框被切断 - 强制移动设备显示图像 + 边框？
【发布时间】：2017-11-13 23:05:31
【问题描述】：

我有一系列 8.5" x 11" @ 72ppi 杂志页面，从 InDesign 导出为 jpeg，我希望在 Blogger 帖子中显示。我想在这些图像中的每一个周围显示一个 1 像素的边框，以便更容易识别页面的边缘。我正在 Chrome 的模拟器中测试 Blogger 网站的移动版本。

图像已正确调整大小以适合移动设备；但是左右边界被切断了。有时页面加载时会显示一个边框，但相对的边框则在屏幕外 2 个像素处。有时当我重新加载博客或更换设备时，边框可能会正确显示，但随后又开始不再出现。如何确保图像的大小正确调整，每边都有边框

.post-body-container img {
border:1px solid #000000;
padding:0px;
width: 612px;
height:100%;
display: block;
}

【问题讨论】：

您是否尝试过添加填充，以便将图像从边缘推送到足以显示边框的程度？

标签： html css mobile border blogger

【解决方案1】：

如果您希望响应能力发挥作用，最好不要使用固定宽度。

.post-body-container {
max-width: 100%;
}

.post-body-container img {
border:1px solid #000000;
padding:0px;
width: 100%;
height: auto;
display: block;
}

示例（尝试调整页面大小以查看图像大小的变化）：https://codepen.io/felipefreitag/pen/EbXxjx

进一步阅读： https://www.w3schools.com/css/css_rwd_images.asp

【讨论】：

【解决方案2】：

感谢您的回复。我通过添加边距稍微修改了提供的代码。这适用于 Chrome 模拟器中的所有设备，除了两个 Nexus 设备，它们会不断缩放图像以切断左右边框。这可能是模拟器的问题。另一个适用于所有设备的解决方案是在 InDesign 中添加 1 像素边框图形并导出具有 1 像素边框的图像。

.post-body-container {
max-width: 100%;
}

.post-body-container img {
border:1px solid #000000;
margin:2px;
width: 100%;
height: auto;
display: block;
}

【讨论】：