右と左のImgボーダーはモバイルで切断されています - 強制的に画像+ボーダーを表示しますか？

Question

InDesignからエクスポートされた8.5 "x 11" @ 72ppi雑誌のページは、Bloggerの投稿内に表示したいjpegとしてシリーズ化しています。私は、これらのイメージのそれぞれの周りに1ピクセルの境界線を表示して、ページのエッジをより簡単に識別したいと考えています。 ChromeのエミュレータでBloggerサイトのモバイル版をテストしています。

モバイルデバイスに合わせて画像のサイズが正しく変更されています。右と左の境界線は切り取られています。時にはページが1つのボーダーを表示するように読み込まれますが、反対側のボーダーは画面から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エミュレータ内のすべての端末で、2つの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; 
}