背景画像付きのaリンクをブラウザのサイズによって表示サイズを変えたい。

Question

前提・実現したいこと

背景画像付きのaリンクをスマホ対応でブラウザのサイズに合わせてaリンクを拡大縮小させたい。

発生している問題

画像サイズが幅200px、高さ100pxの場合。
幅を20%、高さを10%に指定して実行すると、背景画像付きのaリンクが消える。

heightの数値をpx表記にした場合。

heightの数値を%表記にした場合。

スマホでは確認できませんでしたが、レスポンシブ対応をさせるためにwidthやheightを％表記にしたのですが、
hieghtの数値を％表記にすると画像が表示されなくなります。

HTML

<section id="box1">
	<a href="xxx.html"></a>
</section>

CSS

#box {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
}

#box a {
	background-image: url("../img/title.png");
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	width: 20%;
	height:10%;
}

パーセントをvhに変更しても結果は同じだった。

高さを普通に100pxとするときちんとPCでは表示はされるがスマホサイズにブラウザを小さくさせると
画像の幅が小さくなって横の分画像が消えてしまう。
CSS

#box {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
}

#box a {
	background-image: url("../img/title.png");
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	width: 20%;
	height:100px;
}

試したこと

幅や高さをmax-widthやmax-height、もしくはmin-width、min-heightに変更してみるが、
背景画像付きのaリンクが消えてしまった。

#box a {
	background-image: url("../img/title.png");
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	width: 20%;
	height:10%;
}

この部分にbackground-size: contain;を追加したが変化はなかった。

きちんと元の画像サイズと同じく画像を表示させてスマホで見ても表示がおかしくならないようにするのは
どうしたらいいでしょうか？

Comments

[hope_mucci]

どういう状態がゴールなのか質問文から読み取れません。具体的な表示画面を補足してもらえると回答が付きやすいと思います。
・目指す状態の画像（PC、スマホ表示それぞれ）
・現状の状態の画像（PC、スマホ表示それぞれ）

[erimakitokage]

ありがとうござざいます。修正します。

[hope_mucci]

画像が添付されましたが、これは本当に問題に則した画像でしょうか？
背景画像は問題の数値より明らかに巨大ですし、提示のhtmlと内容が違うように見えます。スマホ表示時の表示が一番の問題のはすですが、それも添付されていません。

[erimakitokage]

すいません。まだ慣れておらず、修正できたらしますが、こちらで解決してしまいましたので掲載しておきます。色々と助言いただいてありがとうございました。

[hope_mucci]

自力で解決できてなによりです。

[erimakitokage]

いい勉強になりました。

Answer 1

#box aでbackground-imageを指定して画像とテキストの重ね合わせを実現していますが、
それだと画像のサイズを画面に合わせ、かつa要素のサイズを画像に合わせるというのは難しいのではないですかね。

なので、

<section id="box">
  <a href="xxx.html">
    <img src="画像">
    <p>テキスト</p>
  </a>
</section>

※box1はboxに修正しました。

#box {
  display: flex;
  width: 100%;
}

#box a {
  position: relative;
}

#box a img {
  width: 100%;
}

#box a p {
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
}

こんな感じですかね。

Comments

[erimakitokage]

ありがとうございます。こちらも試して見ます。

Answer 2

#box a {
    background-image: url("../img/title.png");
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    width: 20%;
    height:90px;
}

私のケアレスミスなのか、heightのpxの数値を変えたらサイズが綺麗に可変されました。
申し訳ございませんでした。
また、上手に質問したつもりが足りない部分が多いことにも気付かされました。
次回質問することがあったら修正依頼などを参考にし質のいい質問をするよう心がけます。