CSSスプライトで表示させた画像を画面の拡大縮小に合わせるには？

Question

前提・実現したいこと

CSSスプライトで表示させた画像を、縦横比はそのままで画面の拡大縮小に合わせて表示したい。

上記の通りなのですが、どうすればいいか分からず悩んでいます。
widthやheightを％で指定しても反映されません。

該当のソースコード

<div class="xxx">
	<ul>
	<li id="xxx1"><a href="aaa.html"></a></li>
	<li id="xxx2"><a href="bbb.html"></a></li>
	<li id="xxx3"><a href="ccc.html"></a></li>
	</ul>
</div>
-----------------------------------------------
CSS
.xxx ul {
	padding-top: 10px;
	line-height: 0;
	text-align: center;
}
.xxx ul li {
	display: inline-block;
	list-style-type: none;
	overflow: hidden;
}
.xxx ul li a {
	display: block;
	width: 100px;
	height: 100px;
	margin: 0 10px;
	overflow: hidden;
}
.xxx ul li#top1 a {
	background-image: url(../images/aaa.jpg);
}
.xxx ul li#top2 a {
	background-image: url(../images/bbb.jpg);
}
.xxx ul li#top3 a {
	background-image: url(../images/ccc.jpg);
}
#xxx1 #xxx2 #xxx3 a, .xxx ul li a:hover {
	background-position: 0 -100px;
}

自分で試したこと
「.xxx ul li a」のwidthを100%、heightを50%にして、「#xxx1 #xxx2 #xxx3 a, .xxx ul li a:hover」でbackground-positionを0 -50%にした。

補足情報（FW/ツールのバージョンなど）

HTML5　CSS

Comments

[Lhankor_Mhy]

「画面の拡大縮小に合わせて表示したい」とのことですが、「画面の拡大縮小」とは具体的にはどのようなことですか？　また「合わせる」とは具体的にはなにをなににどのように合わせるのですか？

Answer 1

下記のようなことでしょうか。

htmlとCSSセレクタが合致してませんので、HTMLの方に合わせてます。

.xxx ul {
  padding-top: 10px;
  line-height: 0;
  text-align: center;
}
.xxx ul li {
  width: 20%; /* %で幅指定 お好みで変更してください */
  display: inline-block;
  list-style-type: none;
  overflow: hidden;
}
.xxx ul li a {
  display: block;
  width: 100%;
  padding-top: 100%; /* 高さを幅と同じにする 縦横比1：1 */
  margin: 0 10px;
  background-position: top;
  background-size: cover; /* 背景画像のサイズを幅一杯に広げる */
}
.xxx ul li#top1 a {
  background-image: url(../images/aaa.jpg);
}
.xxx ul li#top2 a {
  background-image: url(../images/bbb.jpg);
}
.xxx ul li#top3 a {
  background-image: url(../images/ccc.jpg);
}
.xxx ul li a:hover {
  background-position: bottom;
}

CodePenサンプル

Comments

[nzm_2255]

ありがとうございます！すごい！出来ました〜！！
初心者の質問に丁寧にお答えいただいて、本当にありがとうございました(*´v`*)