HTMLとCSSを用いてウィンドウサイズに依って大きさが変わるマウスオーバー画像の画像の集合の実装

前提・実現したいこと

javascriptを用いらずにマウスオーバーで変化しウィンドウサイズに応じて大きさが変化する画像を実装する
3*2で隙間なく並んだ画像の大きさが常に同じ縦横比でウィンドウサイズに依らず1ページに収まるマウスオーバーで変化する画像の集合を実装したいです。
色々と調べてmax-width: 30vw;max-height: 30vw;を用いると大きさが自動で変化すると良いとわかったのですが実際に実装すると思っていたのとは違いウィンドウサイズを小さくすると上の行の画像は縦横幅一定で小さくなるのですが下の行の画像が縦長になり、マウスオーバーすると画像の形が変になってしまいます。
初歩的な質問かとは思いますが、調べても中々出てこず、チュートリアル的なのも見返しても中々情報が出てこずわかりませんでした。
もし解決策をご存知の方がいましたらお願いします。

index.html

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <title>
            トップページ
        </title>
    </head>
    <body>
        <div class="moall">
            <div class="moal">
                <div class="mo a">
                    <a href="test.html">
                        <img src="img/red.png" alt="サンプル">
                    </a>
                </div>
                <div class="mo b">
                    <a href="test.html">
                        <img src="img/blue.png" alt="サンプル">
                    </a>
                </div>
                <div class="mo c">
                    <a href="test.html">
                        <img src="img/red.png" alt="サンプル">
                    </a>
                </div>
            </div>
            <div class="moal">
                <div class="mo d">
                    <a href="test.html">
                        <img src="img/blue.png" alt="サンプル">
                    </a>
                </div>
                <div class="mo e">
                    <a href="test.html">
                        <img src="img/red.png" alt="サンプル">
                    </a>
                </div>
                <div class="moal">
                    <div class="mo f">
                        <a href="test.html">
                            <img src="img/blue.png" alt="サンプル">
                        </a>
                </div>
            </div>
        </div>
    </body>
</html>

index.css

body{
	overflow: hidden;
}

.mo {
    cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
 
.mo a {
    display: inline-block;
}
 
.mo a:hover {
	background-color: transparent; /* IE6対応 */
}
 
.mo a:hover img {
    visibility: hidden;
}

.moal {
	padding-top: 0px;
	display: flex;
	justify-content: center;
}

.moall {
	padding-top: 0px;
	align-items: center;
}

.a {
	background: url("img/blue.png") no-repeat;
	max-width: 30vw;
	max-height: 30vw;
}

.b {
	background: url("img/red.png") no-repeat;
	max-width: 30vw;
	max-height: 30vw;
}

.c {
	background: url("img/blue.png") no-repeat;
	max-width: 30vw;
	max-height: 30vw;
}

.d {
	background: url("img/red.png") no-repeat;
	max-width: 30vw;
	max-height: 30vw;
}

.e {
	background: url("img/blue.png") no-repeat;
	max-width: 30vw;
	max-height: 30vw;
}

.f {
	background: url("img/red.png") no-repeat;
	max-width: 30vw;
	max-height: 30vw;
}

補足情報

red.pngとblue.pngは同じ大きさの画像です。
イメージとしてはこのサイトのような感じです

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

回答1件

ベストアンサー

提示のCSSでは、質問のような現象は再現出ませんが、サイズがおかしいのか確かです。

おそらく img要素と背景画像(background)に適切なサイズ設定をしていないのが原因でしょう。

とりあえず、下記のCSSを追加してみてください。

css
1.mo img {
2  width: 100%;
3}
4div.mo {
5  background-size: cover;
6}

投稿2020/12/28 13:04

hatena19

総合スコア34075

bvgakuhfegbyiue

2020/12/29 01:46

追加したところ無事やりたかった動作になりました。ありがとうございます。追加の質問で申し訳ないのですが、 div.mo {background-size: cover;} は何の為にあるのでしょうか？ bodyにbackground-imageを設定してdiv.mo {background-size: cover;}をなくしても、あっても変化がなかったので、ある意味がわかりません。何度も申し訳ないのですが、教えてくださると助かります。