堆棧內存溢出
  簡體   English   中英

設置@media res 時圖像不會調整大小

[英]Image doesn't resize when setting @media res

 原文  2019-10-24 12:05:32  6   2    html/ css

問題描述

所以我不知道為什么我的圖像沒有調整大小我目前只是為了好玩而學習一些 Html 和 Css（沒有學習任何 JS，但很快就會開始）

正常情況下圖像大小很好，但是當“@media only screen and (max-width: 600px)”時，圖像保持不變，但邊框實際上遵循寬度規則。

原始圖像為 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 屏幕和（最大寬度：600px）”中正確調整大小

2 個解決方案

解決方案1
 0  2019-10-24 12:45:23

試試下面的代碼..在響應式中運行良好..它已針對響應式網格進行了更新。 謝謝你。

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

解決方案2
 0  2019-10-24 12:58:23

請從媒體查詢中刪除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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 媒體查詢：調整瀏覽器大小時不會更改樣式 調整瀏覽器大小時，bxslider滑塊圖像不會調整大小 圖片不會使用媒體查詢來調整大小 當我將屏幕尺寸調整為小於600像素時，媒體查詢不起作用 從手機查看時，媒體查詢不適用於頁腳部分，但在調整瀏覽器屏幕大小時有效 Bootstrap封面圖片不會在移動設備上調整大小 全屏圖像預覽不會垂直調整大小 使用戶嘗試調整圖像大小時圖像不會四處移動 大於屏幕分辨率時，彈出圖像查看器不會調整圖像大小 html / css圖像不會在調整瀏覽器大小時擴展父元素
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM