質問: ### 前提・実現したいこと ・画像ボタン(画像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に指定しています。
回答: ある程度前後省略されたCSSであると思うので正確な回答になっているか不安ですが このコードだけで判断するに、`img` の`Width:100%` に`li` の幅が引っ張られて、ブラウザ幅に対して `100%` 扱いになっているのが横に並ばない原因と考えられます。 `li` に対して`Width:50%` などの横に並べる状態の幅に指定することで、 `img` の幅も、`li` の幅に対する `100%` となり、相互に引っ張られる事無く横に並んで一緒に縮小してくれそうです。