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.
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
.post-body-container img {
border:1px solid #000000;
padding:0px;
width: 612px;
height:100%;
display: block;
}
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
Further reading: https://www.w3schools.com/css/css_rwd_images.asp