1枚の画像でデバイス別に表示サイズを変更したい

画像ソースを変えずにスマホ、タブレット、PCごとに画像サイズを調整したい
画像をタイル状に隙間なく表示したい
bootstrapを使用しています。
古いIE等は考慮しません。
画像はローカルに保存せず画像アドレスで引っ張ります。

コード
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
   
    <title>BCbooks</title>

    <style type="text/css">
      #container {
    display:flex;
   width:100%;
   padding-top:30px;
   
  margin:0 auto;
}
#container .item img {
  background: rgb(135, 199, 135);
  width:300px;
  height:auto;
  vertical-align: bottom;
 

}

 
   /*スマホ*/
  @media screen and (max-width: 767px) {
        
    #container .item img{
      max-width:100%;
      min-width:100%;
      width:500px;
      
    }
    #container {
      flex-direction:column;
      
    }
  }
  /*タブレット*/
  @media screen and (min-width:768px) and ( max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
    #container {
      flex-wrap:wrap;
      width:100%;
      margin-right: -60px;
     
     
    }
    #container .item img {
       width:350px;
       flex-wrap:wrap;
     
}
  }
     
    </style>
    </head>
    <body>
      <div id="container" class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
	
        <div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu017.jpg"></div>
        <div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu016.jpg"></div>
        <div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu015.jpg"></div>
        <div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu014.jpg"></div>
        <div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu013.jpg"></div>
        <div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu012.jpg"></div>
        <div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu011.jpg"></div>
      </div>
        
  
      <!-- Optional JavaScript; choose one of the two! -->
  
      <!-- Option 1: Bootstrap Bundle with Popper -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  
      <!-- Option 2: Separate Popper and Bootstrap JS -->
      <!--
      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
      -->
    </body>
  </html>

■は画像です
スマホ時　横2列　
■■
■■
■■
■■
タブレット時　横4列
■■■■
■■■■
■■■■
pc時　横6列
■■■■■■
■■■■■■
■■■■■■
このようなデザインをイメージしています。

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

回答2件

ベストアンサー

/*共通*/
#container {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    width:100%;
    max-width:1100px;
    margin:0 auto;
    
      
}
#container .item{
  width:180px;
  
}

img{
  width:100%;
  max-width:100%;
  height:auto;
  vertical-align: bottom;
}
/*タブレット*/
@media screen and (min-width:768px) and ( max-width:1024px) {
  /*　画面サイズが768pxから1024pxまではここを読み込む　*/
  #container {
     background:gray; /*動作チェックのカラー*/
     
   
  }
  #container .item {
     width:220px;
     
   
}


   /*スマホ*/
  @media screen and (max-width: 767px) {
    #container {
      background:lemonchiffon;/*動作チェックのカラー*/
     
    }

		<div id="container" class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
	
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu017.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu016.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu015.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu014.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu013.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu012.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu017.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu016.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu015.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu014.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu013.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu012.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu017.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu016.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu015.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu014.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu013.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu012.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu012.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu012.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu012.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu012.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu012.jpg"></div>
		<div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu012.jpg"></div>
	
	</div>

こんな感じでしょうか？

投稿2021/10/23 17:39

編集2021/10/24 01:45

niconic73027793

総合スコア215

moai8739

2021/10/24 03:01

ありがとうございますイメージ通り表示できました！ありがとうございました！

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

#container {
display:flex;
width:100%;
padding-top:30px;

margin:0 auto;
}
#container .item img {
background: rgb(135, 199, 135);
width:300px;
height:auto;
vertical-align: bottom;

}

/スマホ/
@media screen and (max-width: 767px) {

#container .item img{
  max-width:100%;
  min-width:100%;
  width:500px;
  
}
#container {
  flex-direction:column;
  
}

}
/タブレット/
@media screen and (min-width:768px) and ( max-width:1024px) {
/*　画面サイズが768pxから1024pxまではここを読み込む　*/
#container {
flex-wrap:wrap;
width:100%;
margin-right: -60px;

}
#container .item img {
   width:350px;
   flex-wrap:wrap;

}

投稿2021/10/22 14:57

編集2021/10/22 17:34

niconic73027793

総合スコア215

moai8739

2021/10/22 23:50

回答ありがとうございます。頂いたコードをまとめるとコード <style type="text/css"> .container { display:flex; width:100%; padding-top:30px; margin:0 auto; } .container .item img{ background: rgb(135, 199, 135); width:300px; height:auto; vertical-align: bottom; } /* スマホ*/ @media screen and (max-width: 767px) { .container .item img{ max-width:100%; min-width:100%; width:500px; } .container{ flex-direction:column; } } /*タブレット*/ @media screen and (min-width:768px) and ( max-width:1024px) { /*　画面サイズが768pxから1024pxまではここを読み込む　*/ .container{ flex-wrap:wrap; width:100%; margin-right: -60px; } .container .item img{ width:350px; flex-wrap:wrap; } } </style> でよろしかったでしょうか？このコードで実行すると画像表示がまだ修正されてません。