justify-content: space-aroundで横並びにした画像がレスポンシブに縮小されない

いつもお世話になっております。
初歩的な質問で申し訳ないのですが、ご回答よろしくお願いいたします。

前提・実現したいこと

HTML5/CSS3でjustify-content: space-aroundで横並びにした画像がレスポンシブに縮小できるようにしたい。

発生している問題・エラーメッセージ

横並びに画像が縦横比を保ったまま縮小されない。

エラーメッセージ
なし、

該当のソースコード

HTML5/CSS3
ソースコード
■HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="responsive_kadai.css">
  <title>My HTML Templete</title>
</head>
<body>
  <header>
    <nav class="nav">
      <a href="#" class="nav nav-logo">ロゴ</a>
      <ul class="nav nav-ul">
        <li><a href="#">メニューA</a></li>
        <li><a href="#">メニューB</a></li>
        <li><a href="#">メニューC</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div class="content1"></div>
    <div class="content2">
      <div class="content2 content2-img"></div>
      <div class="content2 content2-img"></div>
      <div class="content2 content2-img"></div>
    </div>
  </main>
</body>
</html>

■CSS

<code>
.nav{
  width: 100%;
  height: 50px;
  background-color: #00c6b2;
  display: flex;
  color: white;
  border:1px;
  border-color: white;
}

.nav-logo{
  align-items: center;
  padding-left: 10px;
}

.nav-ul{
  width: 100%;
  height: 100%;
  list-style: none;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
}

.nav-ul > li{
  font-size: 15px;
  padding-right: 20px;
}

a{
  width: 50px;
  height: 100%;
  text-decoration: none;
  color: white;
}

.content1{
  width: 100%;
  height: 500px;
  background: url("content1.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.content2{
  width: 100%;
  height: 360px;
  display: flex;
  background-color: #00c6b2;
}

.content2-img{
  width: 33.3333%;
  height: auto;
  justify-content: space-around;
  background: url("content2.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: 12px;
}

試したこと

HTMLの画像の部分をimgタグとしてみたり、CSSの画像ファイルに対応する部分にmaxwidthを設定しました。

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

開発環境：MacBook Pro 2017/VSCode

kei344

2018/09/08 15:29

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

kei344

2018/09/11 10:54

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

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

回答1件

ベストアンサー

シンプルに実装できます。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>My HTML Templete</title>
		<style>
		.content {
			display: flex;
		}
			.content__item {
				margin: 12px;
			}
				.content__item img {
					max-width:100%;
				}
		</style>
	</head>


	<body>
		<div class="content">
			<div class="content__item">
				<img src="http://dummyimage.com/600x400/CCC/fff.png&text=代替テキスト">
			</div>
			<div class="content__item">
				<img src="http://dummyimage.com/600x400/CCC/fff.png&text=代替テキスト">
			</div>
			<div class="content__item">
				<img src="http://dummyimage.com/600x400/CCC/fff.png&text=代替テキスト">
			</div>
		</div>
	</body>
</html>

投稿2018/09/09 01:40