Изображение не изменяется при установке @media res

Question

Ооочень я понятия не имею, почему мое изображение не меняет размер. В настоящее время я просто изучаю некоторые Html и Css для развлечения (не изучал никакого JS, но скоро начну)

Размер изображения нормальный, но когда "@media only screen and (max-width: 600px)" изображение остается таким же, но граница фактически соответствует правилу ширины.

Исходный img - 150x250px

Пробовал Max-width и height не работал изменение размера столбцов дало худшие результаты

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  background-color:white;
}
.grid-itemimg {
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-left: 0px;
  border-right:0px;
  margin: 0px 0px 0px 0px;
  padding: 0px 20px 0px 20px;
  font-size: 30px;
  text-align: center;
  max-width: 120px;
  max-height: 250px;

}

.grid-itembtn {
 display:block;
 border: 0px solid #4a4fcd;
 border-radius: 3.5px;
 background: none;
 min-height:25px;
 margin: 0px 1px;
 padding: 0px 20px 0px 20px;
 font-size: 25px;
 font-family: "montserrat";
 cursor: pointer;
 transition: 0.5s;
 position: relative;
 overflow: hidden;
 color: transperent;
 text-align: center;
 max-width: 120px


}
.grid-itembtn:hover {
 border: 10px solid #4a4fcd;
 border-radius: 3.5px;
 background: none;
 font-size: 25px;
 font-family: "montserrat";
 cursor: pointer;
 margin: 0px;
 transition: 0.5s;
 position: relative;
 overflow: hidden;
 text-align: center;
 cursor: pointer;
}

a {
   font-family: "montserrat";
   cursor: pointer;
   text-decoration-line: none;

 }



@media only screen and (max-width: 600px) {

  .grid-container {
    display: grid;
    grid-template-columns: auto auto;
    background-color:white;
  }

  
  .grid-itemimg {
    display: block;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.8);
    border-left: 0px;
    border-right:0px;
    margin: 0px 0px 0px 0px;
    padding: 0px 2px 0px 2px;
    font-size: 30px;
    text-align: center;
    width: 50px;
    height: 50px;
  }
  
  .grid-itembtn {
   display:block;
   border: 0px solid #4a4fcd;
   border-radius: 3.5px;
   background: none;
   min-height:25px;
   margin: 0px 1px;
   font-size: 25px;
   font-family: "montserrat";
   cursor: pointer;
   transition: 0.5s;
   position: relative;
   overflow: hidden;
   color: transperent;
   text-align: center;
  
    
  }
  .grid-itembtn:hover {
   border: 10px solid #4a4fcd;
   border-radius: 3.5px;
   background: none;
   font-size: 25px;
   font-family: "montserrat";
   cursor: pointer;
   margin: 0px;
   transition: 0.5s;
   position: relative;
   overflow: hidden;
   text-align: center;
   cursor: pointer;
  }

  a {
     font-family: "montserrat";
     cursor: pointer;
     text-decoration-line: none;
   }
}

<div class="grid-container">
  <div class="grid-itemimg"><img src="http://jinxgames.net/wp-content/uploads/2019/10/shoes-women.jpg"/></div>
  <div class="grid-itemimg"><img src="http://jinxgames.net/wp-content/uploads/2019/10/dress.jpg"/></div>
  <div class="grid-itemimg"><img src="http://jinxgames.net/wp-content/uploads/2019/10/pants-women.jpg"/></div>
  <div class="grid-itemimg"><img src="http://jinxgames.net/wp-content/uploads/2019/10/women-jacket.jpg"/></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-itembtn"><a href="www.jinxgames.com">Shoes</a></div>
  <div class="grid-itembtn"><a href="www.jinxgames.com">Dresses</a></div>
  <div class="grid-itembtn"><a href="www.jinxgames.com">Pants</a></div>
  <div class="grid-itembtn"><a href="www.jinxgames.com">Jackets</a></div>
</div>

Просто хочу, чтобы он правильно изменил размер на «экране только @media и (max-width: 600px)»

html css

0

Bashar Mously 24 Окт 2019 в 15:05

Замените .grid-itemimg {...} в своем медиа-запросе на .grid-itemimg img {...}

–

MattHamer5

24 Окт 2019 в 15:09

Вы изменяете размер только div, а не изображения, вам необходимо изменить размер изображения также для результата. Используйте этот класс в медиа-запросе ".grid-itemimg img" вместо только ".grid-itemimg"

–

Ashwin Bhamare

24 Окт 2019 в 15:12

Ооо да, теперь я выбираю не сетку, а ФАКТИЧЕСКОЕ изображение, хорошо, спасибо

–

Bashar Mously

24 Окт 2019 в 15:13

Answer 1

Удалите width и height из медиа-запроса. он переопределяет свойство вашей сетки. Добавьте max-width или max-height для адаптивного изображения.

Рабочий код:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  background-color:white;
}
.grid-itemimg {
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-left: 0px;
  border-right:0px;
  margin: 0px 0px 0px 0px;
  padding: 0px 20px 0px 20px;
  font-size: 30px;
  text-align: center;
  max-width: 120px;
  max-height: 250px;
}

.grid-itemimg img{
  max-width: 100%;
  max-height:none;
}

.grid-itembtn {
 display:block;
 border: 0px solid #4a4fcd;
 border-radius: 3.5px;
 background: none;
 min-height:25px;
 margin: 0px 1px;
 padding: 0px 20px 0px 20px;
 font-size: 25px;
 font-family: "montserrat";
 cursor: pointer;
 transition: 0.5s;
 position: relative;
 overflow: hidden;
 color: transperent;
 text-align: center;
 max-width: 120px


}
.grid-itembtn:hover {
 border: 10px solid #4a4fcd;
 border-radius: 3.5px;
 background: none;
 font-size: 25px;
 font-family: "montserrat";
 cursor: pointer;
 margin: 0px;
 transition: 0.5s;
 position: relative;
 overflow: hidden;
 text-align: center;
 cursor: pointer;
}

a {
   font-family: "montserrat";
   cursor: pointer;
   text-decoration-line: none;

 }



@media only screen and (max-width: 600px) {

  .grid-container {
    display: grid;
    grid-template-columns: auto auto;
    background-color:white;
  }

  
  .grid-itemimg {
    display: block;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.8);
    border-left: 0px;
    border-right:0px;
    margin: 0px 0px 0px 0px;
    padding: 0px 2px 0px 2px;
    font-size: 30px;
    text-align: center;
    /* width: 50px;
    height: 50px; */
  }
  
  .grid-itembtn {
   display:block;
   border: 0px solid #4a4fcd;
   border-radius: 3.5px;
   background: none;
   min-height:25px;
   margin: 0px 1px;
   font-size: 25px;
   font-family: "montserrat";
   cursor: pointer;
   transition: 0.5s;
   position: relative;
   overflow: hidden;
   color: transperent;
   text-align: center;
  
    
  }
  .grid-itembtn:hover {
   border: 10px solid #4a4fcd;
   border-radius: 3.5px;
   background: none;
   font-size: 25px;
   font-family: "montserrat";
   cursor: pointer;
   margin: 0px;
   transition: 0.5s;
   position: relative;
   overflow: hidden;
   text-align: center;
   cursor: pointer;
  }

  a {
     font-family: "montserrat";
     cursor: pointer;
     text-decoration-line: none;
   }
}

<div class="grid-container">
  <div class="grid-itemimg"><img src="http://jinxgames.net/wp-content/uploads/2019/10/shoes-women.jpg"/></div>
  <div class="grid-itemimg"><img src="http://jinxgames.net/wp-content/uploads/2019/10/dress.jpg"/></div>
  <div class="grid-itemimg"><img src="http://jinxgames.net/wp-content/uploads/2019/10/pants-women.jpg"/></div>
  <div class="grid-itemimg"><img src="http://jinxgames.net/wp-content/uploads/2019/10/women-jacket.jpg"/></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-itembtn"><a href="www.jinxgames.com">Shoes</a></div>
  <div class="grid-itembtn"><a href="www.jinxgames.com">Dresses</a></div>
  <div class="grid-itembtn"><a href="www.jinxgames.com">Pants</a></div>
  <div class="grid-itembtn"><a href="www.jinxgames.com">Jackets</a></div>
</div>

0

Hardik Solanki 24 Окт 2019 в 15:58

Answer 2

Попробуйте код ниже .. который отлично работает в адаптивном режиме .. Он обновлен для адаптивной сетки. Спасибо.

 <!DOCTYPE html>
 <html>
  <head>
   <style>

 .grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    background-color: white;
 }
 .grid-itemimg {
    background-color: white;
   border: 1px solid rgba(0, 0, 0, 0.8);
   border-left: 0px;
   border-right: 0px;
   margin: 0px 0px 0px 0px;
   padding: 0px 20px 0px 20px;
   font-size: 30px;
   text-align: center;
   max-width: 120px;
   max-height: 250px;
}

.grid-itembtn {
   display: block;
   border: 0px solid #4a4fcd;
   border-radius: 3.5px;
   background: none;
   min-height: 25px;
   margin: 0px 1px;
   padding: 0px 20px 0px 20px;
   font-size: 25px;
   font-family: "montserrat";
   cursor: pointer;
   transition: 0.5s;
   position: relative;
   overflow: hidden;
   color: transperent;
   text-align: center;
   max-width: 120px
}

.grid-itembtn:hover {
   border: 10px solid #4a4fcd;
   border-radius: 3.5px;
   background: none;
   font-size: 25px;
   font-family: "montserrat";
   cursor: pointer;
   margin: 0px;
   transition: 0.5s;
   position: relative;
   overflow: hidden;
   text-align: center;
   cursor: pointer;
}

a {
   font-family: "montserrat";
   cursor: pointer;
   text-decoration-line: none;
 }

 @media only screen and (max-width: 600px) {
   .grid-container {
       display: grid;
       grid-template-columns: auto auto;
       background-color: white; 
 }
 .grid-itemimg {
    display: block;
    background-color: white;
    border-left: 0px;
    border-right: 0px;
    margin: 0px auto 20px;
    padding: 0px 2px 0px 2px;
    font-size: 30px;
    text-align: center;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border: 0px solid rgba(0, 0, 0, 0.8);
    border-top: 1px solid rgba(0, 0, 0, 0.8);
}
.grid-itembtn {
    display: block;
    border: 0px solid #4a4fcd;
    border-radius: 3.5px;
    background: none;
    min-height: 25px;
    margin: 0px 1px;
    font-size: 25px;
    font-family: "montserrat";
    cursor: pointer;
    transition: 0.5s;
    position: relative;
    overflow: hidden;
    color: transperent;
    text-align: center;
}
.grid-itembtn:hover {
    border: 10px solid #4a4fcd;
    border-radius: 3.5px;
    background: none;
    font-size: 25px;
    font-family: "montserrat";
    cursor: pointer;
    margin: 0px;
    transition: 0.5s;
    position: relative;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
  }
  a {
    font-family: "montserrat";
    cursor: pointer;
    text-decoration-line: none;
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.8);
   }
 }
    </style>
  </head>
<body>

 <div class="grid-container">
   <div class="grid-itemimg">
     <img src="https://jinxgames.net/wp-content/uploads/2019/10/shoes-women.jpg"/>
     <a href="www.jinxgames.com">Shoes</a>
   </div>
  <div class="grid-itemimg">
    <img src="https://jinxgames.net/wp-content/uploads/2019/10/dress.jpg"/>
    <a href="www.jinxgames.com">Dresses</a>
  </div>
  <div class="grid-itemimg">
    <img src="https://jinxgames.net/wp-content/uploads/2019/10/pants-women.jpg"/>
    <a href="www.jinxgames.com">Pants</a>
  </div>
  <div class="grid-itemimg">
   <img src="https://jinxgames.net/wp-content/uploads/2019/10/women-jacket.jpg"/>
   <a href="www.jinxgames.com">Jackets</a>
  </div>
 </div>

  </body>
</html>

0

Varis 24 Окт 2019 в 15:45

Изображение не изменяется при установке @media res

2 ответа

Похожие вопросы

Новые вопросы

html