[英]Image doesn't resize when setting @media res
sooo I have no idea why my image doesn't resize I am currently just learning some Html and Css for fun (didn't learn any JS but gonna start soon)所以我不知道为什么我的图像没有调整大小我目前只是为了好玩而学习一些 Html 和 Css(没有学习任何 JS,但很快就会开始)
Image size is good in normal but when "@media only screen and (max-width: 600px)" the image stays the same but the border actually follows the width rule.正常情况下图像大小很好,但是当“@media only screen and (max-width: 600px)”时,图像保持不变,但边框实际上遵循宽度规则。
original img is 150x250px原始图像为 150x250px
tried Max-width and height didn't work resizing columns provided worse results尝试最大宽度和高度不起作用调整列的大小提供了更差的结果
.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>
just want it to resize correctly in the "@media only screen and (max-width: 600px)"只是希望它在“@media only 屏幕和(最大宽度:600px)”中正确调整大小
Try Below code.. which is working fine in responsive.. It is updated for responsive grid.试试下面的代码..在响应式中运行良好..它已针对响应式网格进行了更新。 Thank you.
谢谢你。
<!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>
Please remove width
and height
from the media query.请从媒体查询中删除
width
和height
。 it's overriding your grid property.它覆盖了您的网格属性。 Add
max-width
or max-height
for image responsive.为图像响应添加
max-width
或max-height
。
Working code:工作代码:
.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.