设置@media res时图像无法调整大小

时间：2019-10-24 12:05:32

标签： html css

所以我不知道为什么我的图像不调整大小，我目前只是在学习一些Html和Css的乐趣（没有学过任何JS但很快就会开始）

正常情况下图像大小合适，但是当“ @media only screen and（max-width：600px）”时，图像保持不变，但边框实际上遵循宽度规则。

原始img为150x250px

尝试最大宽度和高度无法调整列的大小，从而导致结果变差

.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屏幕和（最大宽度：600像素）”中正确调整大小

2 个答案:

答案 0 :(得分：0)

尝试以下代码..在响应中正常工作。.已针对响应网格进行了更新。 谢谢。 

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

答案 1 :(得分：0)

请从媒体查询中删除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>

相关问题
最新问题