articleの半分を占める背景画像を、ウインドウと一緒に拡大縮小したい

html、css初心者です。articleの背景として指定した画像の扱いに悩んでいます。
articleの左半分に画像がくるようにレイアウトしました。
それが以下のコードです。

・html

<article class="kiji">
      <div class="kiji_top">
        <small>補足</small>
        <h2>見出し</h2>
      </div>

      <p class="kiji_w">
        ～文章～
      </p>

      <div class="btn">
        <a href="/#">リンクボタン</a>
      </div>

    </article>

・CSS

article.kiji{
  width:40%;　本文が表示される幅
  padding-left:55%;　左半分に画像が来るためあけています
  padding-right:5%;　右側も同じくらいあけています
  background-image: url("背景画像");
  background-position: left top;　
  background-size:50% auto;　これでarticleの左半分に背景画像がきます
  background-repeat: no-repeat;
}

article内の文章が短ければそんなに問題はないのですが
文章が長くなってしまった場合、背景画像の縦幅を越えてしまい左下に空白ができてしまいます。
理想としては文章が長くなったりウィンドウを縮小した際、見切れても良いので画像が左側50％を占めたままarticleの高さと同じサイズを保ち拡大縮小してほしいのですが…
overflowを使うのかな？と色々と模索しているのですがなかなか答えが見つからないのでお知恵をかしてください。

Lhankor_Mhy

2019/03/14 07:25

padding-left:55%; とありますが、パディング領域には背景画像が入ると思うのですが、それは構いませんか？

kei344

2019/03/14 07:38

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

xminimx

2019/03/14 07:38

はい、背景画像が入るスペースをあけているのでそれは問題ありません。もしもっと効率の良い方法があれば教えていただけると嬉しいです。

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

回答2件

ご希望からはずれるかもしれないですが

css
1article.kiji{
2position:relative;
3width:40%;
4padding-left:55%;
5padding-right:5%;
6}
7 
8article.kiji::before{
9content:'';
10margin-left:-55%;
11width:50%;
12height:100%;
13background-image: url("...");
14background-position: left top;
15background-size:cover;
16background-repeat: no-repeat;
17position:absolute;
18z-index:-1;
19}

投稿2019/03/14 07:43

Lhankor_Mhy

総合スコア36115

xminimx

2019/03/14 07:54

とても近いところまでたどり着きました！beforeを使うのですね。ただ今回、article.kijiの背景に色を指定しているので教えていただいた方法では画像が隠れてしまいました。背景色がなければ求めていた動作そのものです！ありがとうございます。

Lhankor_Mhy

2019/03/14 08:01

では、z-index:-1; を削除すればいいかと思います。

xminimx

2019/03/14 08:09

早速試してみました。 2点問題が発生しまして、・画像の大きさが固定されてしまう。・articleに指示している上下paddingの影響を受けてしまう（ごめんなさい、記述不足でした。全てのarticleに「padding:10% 20%;」を指示しているのです。）ここで止まってしまいました。もう少し頑張ってみます、ありがとうございます。

xminimx

2019/03/14 08:35

同様にbeforeを使用した解決方法をご教授いただいた方をBAとさせていただきましたが、とても一人では思いつかない方法でとても勉強になりました。またお知恵を貸して頂けると嬉しいです、ありがとうございました。

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

ベストアンサー

CSS
1article.kiji > .kiji_w {
2  /* 適当に調整 */
3  max-height: calc(50vw - 6em);
4  overflow: hidden;
5}

-- 追記。画像のほうを伸縮

CSS
1article.kiji {
2  position: relative;
3}
4
5article.kiji::before {
6  content: '';
7  position: absolute;
8  left: 0;
9  width: 50%;
10  height: 100%;
11  /* 画像はこちらで */
12  background-image: url("背景画像");
13  background-position: left top;
14  background-size: cover;
15  background-repeat: no-repeat;
16}