Right & Left Img Borders Being Cut Off on Mobile - Force Mobile to Display Images + Borders?

I have a series 8.5" x 11" @ 72ppi magazine pages exported from InDesign as jpegs that I wish to display within Blogger posts. I want to display a 1 pixel border around each of these images so the edges of the pages are more easily discerned. I am testing the mobile version of the Blogger site in Chrome's emulator.

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

The images are correctly be resized to fit the mobile device; however the right and left borders are being cut off. Sometimes the page will load with one border showing, but the opposing border is then 2 pixels off screen. Sometimes when I reload the blog, or change devices, the borders might appear correctly, but then start not appearing once again. How do I make sure the images are correctly resized with the border on each side

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

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

2 个解决方案

#1

It's better to not have a fixed width if you want responsiveness to work.

如果你想要工作的响应性，最好没有固定的宽度。

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

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

Example (try resizing the page to see the image size changing): https://codepen.io/felipefreitag/pen/EbXxjx

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

Further reading: https://www.w3schools.com/css/css_rwd_images.asp

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

#2

Thanks for the replies. I slightly modified the supplied code by adding a margin. This works for all the devices in the Chrome emulator except for the two Nexus devices, which keep scaling the images so as to cut off the left and rights borders. This could be a problem with the emulator. Another solution which works on all devices is to add a 1 pixel border graphic inside InDesign and export the images with a 1 pixel border.

谢谢你的回复。我通过添加边距略微修改了提供的代码。这适用于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;
}

#1