CSSで、正方形画像を横長に表示する方法

HPの模写をしていて、どうしても解決できず質問させていただきます。

スマホサイズでは正方形で表示されている画像を、PCサイズになった際に横長＆引きで表示させる方法がわからず苦戦しております。

【PCサイズで横長画像】→【スマホサイズで正方形画像】にする方法は調べて何種類か記事をみつけれたので分かったのですが、逆はできないのでしょうか。

方法として考えたのは、画像サイズを2種類用意して画面サイズに合わせて@mediaを用いて表示/非表示にする方法です。

スマホサイズ＝正方形画像を表示　/　横長画像を非表示(display: none;)
PCサイズ＝正方形画像を非表示(display: none;)　/　横長画像を表示(display: block;)

上記の記述を行いスマホサイズの状態では横長画像が非表示になったので成功しました。
PCサイズに広げた際は、両方の画像が消えてしまいました。

左：スマホサイズ　右：PCサイズ

コード
HTML

    <div class="uncle_first">
      <img class="uncle_first" src="img/young_uncle_2.png" alt="uncle">
    </div>
    <div class="uncle_second">
      <img class="uncle_first" src="img/young_uncle.jpg" alt="uncle">
    </div>

CSS
/共通CSS/
div.uncle_first {
width: 100%;
height: auto;
/position: relative;/
/object-fit: cover;/
margin-top: 60px;
}

div.uncle_second {
display: none
}

/mediumサイズの時の記述/

@media screen and (min-width: 744px) {

	/*正方形画像です*/
	img.uncle_first {
		display: none;
	}

	/*長方形画像です*/
	img.uncle_second {
		display: block;
		width: 100%;
		height: auto;
	}

}

内容が煩雑になっているかもしれません、申し訳ございません。
原因と解決方法を教えていただきたいです、よろしくお願いいたします。

kei344

2019/11/25 15:20

「【PCサイズで横長画像】→【スマホサイズで正方形画像】にする方法」は「【スマホサイズで正方形画像】→【PCサイズで横長画像】にする方法」と同じですよ。あと、CSSは画像でなくコードブロックでお書きください。（質問文は編集できます）また、提示の箇所だけでは問題の再現が出来ないので、HTML/CSSはなるべく全体を提示されたほうが回答が付きやすいです。

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

回答1件

ベストアンサー

複数の要素に渡って同じクラス名を使っているため混乱しているのではないでしょうか。今回の場合、子結合子を使用することで以下のように行えます (動作確認用リンク)。

HTML
1<div class="uncle_first">
2  <img class="uncle_first" src="http://placehold.jp/3d4070/ffffff/150x150.png" alt="uncle">
3</div>
4<div class="uncle_second">
5  <img class="uncle_first" src="http://placehold.jp/3d4070/ffffff/450x250.png" alt="uncle">
6</div>

CSS
1.uncle_first>.uncle_first {
2  width: 100%;
3  height: auto;
4  margin-top: 60px;
5}
6
7.uncle_second>.uncle_first {
8  display: none;
9}
10
11@media screen and (min-width: 744px) {
12  .uncle_first>.uncle_first {
13    display: none;
14  }
15
16  .uncle_second>.uncle_first {
17    display: block;
18    width: 100%;
19    height: auto;
20  }
21}

ただし、上記のように行うならば、画像ごとにユニークなクラスを与えてしまったほうが分かりやすくなると思います (動作確認用リンク)。

HTML
1<div>
2  <img class="uncle_first" src="http://placehold.jp/3d4070/ffffff/150x150.png" alt="uncle">
3</div>
4<div>
5  <img class="uncle_second" src="http://placehold.jp/3d4070/ffffff/450x250.png" alt="uncle">
6</div>

CSS
1.uncle_first {
2  width: 100%;
3  height: auto;
4  margin-top: 60px;
5}
6
7.uncle_second {
8  display: none;
9}
10
11@media screen and (min-width: 744px) {
12  .uncle_first {
13    display: none;
14  }
15
16  .uncle_second {
17    display: block;
18    width: 100%;
19    height: auto;
20  }
21}