右和左图像边框在移动设备上被切断 - 强制移动设备显示图像 + 边框？

Question

我有一系列 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;
}

Answer 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

Answer 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;
}