[英]css images in a row responsive
im displaying max. 即时通讯显示最大 3 images in a row, if you resize browser window they stack under each other.
连续3张图像,如果您调整浏览器窗口的大小,它们会相互堆叠。
Now for example, if you resize the window and only one image is shown, how can I set the images size to width:100%;? 现在,例如,如果您调整窗口的大小并且仅显示一张图像,如何将图像的尺寸设置为width:100%;?
I've seen this on https://www.slickwords.com/ for example. 例如,我已经在https://www.slickwords.com/上看到了这一点。
My Code: 我的代码:
#wrapper {
margin: 0 auto;
width: 900px;
max-width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
div>div>div {
display: inline-block;
}
div>div {
text-align: center;
}
<div id="wrapper">
<div style="max-width:900px;margin: 0 auto;">
<div style="width:100%;">
<div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
<div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
<div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
<div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
<div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
<div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
<div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
</div>
</div>
</div>
Regards 问候
What you're looking for are css media queries 您正在寻找的是CSS媒体查询
With a statement as simple as this: 用这样简单的语句:
@media screen and (min-width: 992px) {
body {
background-color: blue;
}
}
You can force the body to be blue (if the screen width is bigger than 992px). 您可以强制主体为蓝色(如果屏幕宽度大于992px)。
Source: https://www.w3schools.com/css/css3_mediaqueries_ex.asp 资料来源: https : //www.w3schools.com/css/css3_mediaqueries_ex.asp
Instead of manually measuring the point where the images stack up using media queries, you can use flexbox 's flex-flow
property and apply a min-width
to each one of the children to set the "breaking point": 您可以使用flexbox的
flex-flow
属性并将min-width
应用于每个子级来设置“断点”,而不是使用媒体查询来手动测量图像堆叠的点:
//The JS code here is just for fiddling around and isn't relevant. let input = document.getElementById("setwidth"); input.onchange = e => { document.getElementById("container").style.width = e.target.value+"%"; document.getElementById("widthspan").textContent = e.target.value+"%"; };
#container { display: flex; flex-flow: row wrap; /* This is where the magic happens!*/ align-items: flex-start; align-content: flex-start; justify-content: space-around; border: 2px solid black; } #container>div { flex-basis: 22.5%; /*Try to take up 22.5% of the space, which would be almost a quarter but with a spacing of 2.5% total*/ background: blue; border: 1px solid yellow; height: 100px; min-width: 80px;/* This is also where the magic happens */ }
<div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <!-- Just for fiddling around: --> <hr> Set container width: <span id="widthspan">100%</span> <input id="setwidth" type="range" min="1" max="100" value="100"/>
Additional resources: 其他资源:
As Tim Gerhard suggested above, you need to check media queries. 正如Tim Tim Hardhard上面建议的那样,您需要检查媒体查询。 You can also try the following.
您也可以尝试以下方法。
I think these should work. 我认为这些应该有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.