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

Размер изображения в норме хороший, но при использовании «@media only screen и (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 only and (max-width: 600px)"

0
Bashar Mously

2 ответа

Удалите 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>

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

 <!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>
58541043