レスポンシブデザインで左右に並んだ画像が縮小しない

前提・実現したいこと

・画像ボタン（画像A、画像B）を左右に並べ、画面のセンターに表示
・画面サイズ縮小に合わせてボタンも縮小

概要です

レスポンシブのスマホサイトを制作しております。

デザインカンプから2倍サイズで用意をした画像（ボタン）を2つを画面中央揃えで表示を行い、
画面の縮小に合わせて画像も縮小させていきたいと考えています。

liで組んでdisplay:inline-blockを指定しているのですが
画面サイズを縮小していくと、中央ぞろえで左右に配置した画像が
縮小されることなく、左側の画像の下に回り込んでしまいます。

（左画像：画像A、右画像：画像B→　画像Aの下に画像Bが回り込んでセンター揃えになる）

この左右に並べた画像を画面サイズが縮小されたときに、画像Aが画像Bの下に回り込んでしまうことなく
左右に並んだ状態で連動して縮小されるようにするにはどのようにしたらよろしいでしょうか？

ご教授お願い致します。

該当のソースコード

【以下CSS】

　.header_inner{
@include width_height(100%, auto);
@include clearfix;
}

.header_com_container_sp{
@include width_height(90%, auto);
margin-left: auto;
margin-right: auto;
}

ul.header_com_container_sp_inner{
position: relative;
}

li.header_com_list_sp{
display: inline-block;

img{
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

}

li.header_com_list_sp:first-child{
margin-right: 28px;
}

li.header_com_list_sp:last-child{
margin-right: 0;
}

補足情報（FW/ツールのバージョンなど）

・sassで記述しています。
・ボタン画像のオリジナルサイズは256x82で、表示する際にhtmlで半分の128x41に指定しています。

m.ts10806

2019/11/15 03:56

コードはマークダウンのcode機能にてご提示ください。

行動規範の内容に同意します

回答1件

ベストアンサー

ある程度前後省略されたCSSであると思うので正確な回答になっているか不安ですが

このコードだけで判断するに、img のWidth:100% にli の幅が引っ張られて、ブラウザ幅に対して 100% 扱いになっているのが横に並ばない原因と考えられます。

li に対してWidth:50% などの横に並べる状態の幅に指定することで、

img の幅も、li の幅に対する 100% となり、相互に引っ張られる事無く横に並んで一緒に縮小してくれそうです。

投稿2019/11/15 05:34

iss

総合スコア506

netuser02

2019/11/15 05:58

回答をありがとうございます。ご指摘のように、該当の箇所のみのhtmlとcssなので判断が難しかったことはお許しください。質問時に掲載のcssが画面横幅サイズ768pxで正しく表示されているソースになります。この時点でWidth:50%にしてしまうと、画面サイズの変更前からボタンサイズが50%表示になってしまい、レイアウトが崩れしまいます。画面横幅サイズ768pxから＜425px＞→＜375px＞と縮小していったときにその画面サイズに応じてボタンサイズが縮小されればと考えております。ちなみに2つのボタンの間隔は768サイズの時に28pxとしており、こちらの間隔も保って（画像Aと画像Bの間に空間ができる）の縮小が想定としております。画像が一つであれば難なく縮小している（このボタンの上に別divでメインビジュアルを配置しています）のですがこのボタンの横並びのところだけが上手くいかずに苦慮しております。改めてご教授いただければ幸いです。何卒よろしくお願いいたします。

iss

2019/11/15 06:38

補足ありがとうございます。どちらにしても、幅が縮まると並ばずに一段落ちる原因は前記のとおりです。現在ウィンドウ幅に余裕がある段階で横に２つ並んでいるのは、128px の「画像幅×2つ」と「他の余白の値」の合計が、 container 幅768px より小さいからになります。 li の幅が img の幅に依存しているから起きている現象です。「Width:50% **など** の横に並べる状態の幅に指定」としたのは、50% にという値の話ではなく、コンテナ側の幅広に対して、２つの li がパーセンテージで横並びになるよう設定さえしておけば、ウィンドウ幅に左右されず横並びが維持される。という、スタイルの構造設計上の考え方です。

iss

2019/11/15 06:41

参考コードを書きたいのですが、今スマホからなもので、文章だけですいません(汗)

netuser02

2019/11/15 06:52

ご回答をありがとうございます。制作中のページがシームレスなレスポンシブを要求しているものではなく、指定された画面サイズ(ブレイクポイント）での表示が整っているかに主軸を置いたページということでしたので、該当の画面サイズでレイアウトが正しく表示できるように、ご回答を頂きましたWidthの値で画像サイズの調整を行ってみたいと思います。　→　何とか横並びの表示にはできました！＜ありがとうございます。また、試行錯誤の中で表示領域にtableを置いてtdで画像と空白の横幅を指定して各要素を囲んで画面の可変を行ったところ、こちらはシームレスにサイズの変更ができましたのでご教授いただいた方法と合わせてPLに確認を取ってみたいと思います。初歩的で且つ言葉足らずな質問にお応えを頂きまして、本当にありがとうございました。

行動規範の内容に同意します