HTML レスポンシブに失敗する。【画像あり】（２カラムボックスレイアウト）

レスポンシブがうまくいかないのでご相談させてください。

２カラムの50%ずつのボックスレイアウトで、
左に画像、右にテキストを並べるデザインです。

画面幅を狭めたときに、画像とテキストボックスの高さが揃いません。
よい方法を教えていただけると嬉しいです。よろしくお願いします。

【イメージ】
PC幅だとこのようにきれいにボックスの横並びができているが、
幅を狭めるとこのように高さが揃わなくなります。

こうなるのが理想です。

【やりたいこと】
画像の横幅は全表示されなくなってもかまわないので
縦は全て表示されるようにして、
テキストボックスと画像ボックスの高さがそろうようにしたいです。

html
1              <div class="BOX">
2                <div>
3                  <img src="<?php bloginfo('template_url');?>/img.jpg" alt="">
4                </div>
5                <div class="text-BOX">
6                  <h2 class="text_title">タイトル</h2>
7                  <p class="text">右側によせてテキストテキストテキスト右側によせてテキストテキストテキスト右側によせてテキストテキストテキスト右側によせてテキストテキストテキスト右側によせてテキストテキストテキスト右側によせてテキストテキストテキスト右側によせてテキストテキストテキスト右側によせてテキストテキストテキスト右側によせてテキストテキストテキスト右側によせてテキストテキストテキスト右側によせてテキストテキストテキスト右側によせてテキストテキストテキスト右側によせてテキストテキストテキスト右側によせてテキストテキストテキスト</p>
8                </div>
9              </div>

css
1.BOX {
2  display: flex;
3}
4.BOX div {
5  width: 50%;
6  height: 100% !important;
7}
8.text_title {
9  font-size: 1.25rem !important;
10  color: #fff;
11  text-align: left;
12}
13.text {
14  margin-top: 2rem;
15}
16.text-BOX {
17  background: red;
18  padding: 5.75rem;
19  box-sizing: border-box;
20}

m.ts10806

2018/11/26 11:42

画面キャプチャもご提示いただけますか？そのうえで「こうしたい」という完成イメージもご提示いただければと

harebareyukai

2018/11/26 11:57

承知しました！

退会済みユーザー

2018/11/26 13:16

例えば入りきらなくなったものはどうされたいのですか？

harebareyukai

2018/11/26 13:23

コメントありがとうございます！！ボックスの高さは変えずに固定できればと思います。イメージとしてはこのページの「薬局・薬店などで発売中」あたりと同じようにしたいです。http://lpower.jp/

harebareyukai

2018/11/26 13:25

ただこちらはflotで実装しているので、これをflexboxで再現したいのです。

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

回答1件

画像を切っても大丈夫なのであれば。

CSS
1img {
2  object-fit: cover;
3  height: 100%;
4  width: 100%;
5}
6/* 中略 */
7.BOX div {
8  width: 50%;
9	/* height: 100% !important; */
10}
11/* 略 */
12```**動くサンプル：**[https://jsfiddle.net/rwh3zn46/](https://jsfiddle.net/rwh3zn46/)
13
14
15---
16
17【画像を簡単にトリミング&レスポンシブできる object-fit プロパティ | フロントエンド | kigiroku】
18[https://kigiroku.com/frontend/css-objectfit.html](https://kigiroku.com/frontend/css-objectfit.html)
19
20【1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス】
21[https://www.webcreatorbox.com/tech/object-fit](https://www.webcreatorbox.com/tech/object-fit)
22
23【置換要素のレイアウトのためのプロパティ - object-fitとobject-position | CodeGrid】
24[https://app.codegrid.net/entry/css-object](https://app.codegrid.net/entry/css-object)
25
26padding が大きいとかは、メディアクエリでうまく指定すればよいです。
27
28【メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN】
29[https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries](https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries)