インライン要素に設定した背景を、高さを一定のまま画像を引き延ばさずに横幅を広げる

Question

いつもお世話になっております。
現在wordpressでwebページを作成しております。

インライン要素h2の背景として画像を設定し、下記のようにコーディングしております。
ackground-size: contain;を指定しているので画像は高さ100%で左右が開いているような形で現在表示されております。

それを下記画像のように、高さを80%として画像を引き延ばすことなく横を広げるということを行いたいのですが、うまく調べることができずこちらに質問させていただきました。

適切な方法をご教示いただけますと幸いです。
よろしくお願いいたします。

h2 {
    background: url(https://xxx/xxx/xxx.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-size: 0px;
    line-height: 36px;
    border-bottom: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

Comments

[Lhankor_Mhy]

『画像を引き延ばすことなく横を広げる』ということは、画像の上下を切り捨てる、という理解で合っていますか？

[lyzmfeqpxs54]

ご回答ありがとうございます。

言葉が足らず申し訳ございません。
比率を保ったままとい意味です。
例ですが、要素が幅500p・高さ100px、背景画像が幅400px ・高さ160pxの場合に
画像が要素中央に幅200px・高さ80px で表示できれば良いと考えています。

[Lhankor_Mhy]

「横に広げる」という言葉には特段の意味はないので無視してよい、ということですね。わかりました。

要素の幅が不足する場合には、左右を切り捨てる、という理解で合っていますか？

[lyzmfeqpxs54]

画像的に不足することはないと思いますが、おっしゃる状況の場合はそのようにして問題ございません。
ちなみにですが、その場合でも画像全体を縮小させるなどして画像全体が見えるようすることができるのでしょうか。
不勉強で申し訳ございませんがご教示いただけますと幸いです。

[Lhankor_Mhy]

難しいのではないでしょうか？

Answer 1

こういうことでしょうか。

background-size: auto 80%;

【background-size - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/background-size

Comments

[lyzmfeqpxs54]

ご回答ありがとうございます。

ご教示いただいた方法で無事解決いたしました。
また、何かありました際にご教示いただけますと幸いです。

Answer 2

画像サイズの縦横比を変える、つまり、
表示したいサイズと、実際の画像のサイズが相似(数学で習う意味の「相似」)じゃない場合、

1. 画像を拡大して、はみ出さない部分のみ使用する
2. 画像を縮小して、余白をつくる
3. 画像を引きのばす
   のどれかの手法をとるしかありません。
   どの方法が理想的なのかは機械ではなく誰かが決める必要があります。
   ためしにご自分でイラストでもかいてみて、縦横比を変えるとどうなるかテストしてみてはいかがですか？
   そのうえで画像のサイズを変更する方法をGoogle検索すれば、答えは出るでしょう。