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

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