TOPICSトピックス

すみません、画像サイズと表示の制御が混乱してきたのでご相談です。
この前の定例で、写真にキャプションを入れるとその写真が持っているサイズで表示されることを確認しました。なので、横幅2560 や1280、1000は、キャプション入りにすると、右側がはみ出ます。
写真の編集画面からサイズを小さくしても右側がはみ出ました。
じゃあ、キャプションを入れて最適な限界の横幅サイズはどこだろう、と思って調べてみたら、どうやら1000以下で960ぐらいなようです。

これで解決したかなと思ってスマホ表示で確認すると、キャプション入りの画像はことごとく写真が縮小されないまま表示されてしまい（左右のスクロールバーが出ます）、むしろキャプションなしのほうが縮小されます。
キャプションは設定無しありに関わらず、写真と距離が離れます。私の願いとしては、PCでもスマホでも、写真が適切なサイズに縮小され、写真と間隔が開かずにキャプションが表示されることです。

レスポンシブデザインではないのでしょうか。リキッドデザインなのでしょうか。
イケてないサイトとページですみません。ご確認と調整をお願いできますでしょうか。

 

480 x 360 ピクセルです。写真にキャプションは入れていません。フルサイズで表示されています。

ところが、大きな写真で同じことをすると逆の現象が起きました。

↑2560 x 1920 ピクセルです。写真の編集画面からサイズ半分の1280x960にしました。キャプションは入れていません。

 

元画像のサイズが1280 x 960 ピクセル。キャプション入れてません。

1024 x 768 ピクセルでキャプションなし。

800 x 600 ピクセルでキャプションなし。

640 x 480 ピクセルでキャプションなし。

720 × 540でキャプションなし。

1000 x 750 ピクセルでキャプションなし。

 

以下CSSの追記と、.columnArticle div.article imgに対しての下マージンの調整を行いました。

/* はみ出る画像は100% ------------------------------------------------------------------ */
.alignnone,
.alignright,
.aligncenter {
max-width: 100%;
}
/* キャプション ------------------------------------------------------------------ */
.wp-caption-text{
width:100%;
margin:auto;
}

画像幅を90%から100%にしましたが良かったでしょうか？