在实现媒体屏幕查询时,我似乎无法正确缩小这两个图像。我希望它们堆叠在一起。以下是当我增加两个图像的大小时,尽管有媒体查询,但它在移动设备上增加的大小。
<div class="col-lg-6 col-md-6">
<h2 class="templatemo-gold">Our Services</h2>
<div class="row">
<div class="stack">
<img src="images/Page1.png" width="600" height="600" alt="Services">
</div>
<div class="stack">
<img src="images/Page2.png" width="600" height="600" alt="Services">
</div>
</div>
</div>
这是我的媒体查询:
@media screen and (max-width: 767px)
.stack {
width: 175px;
height: 175px;
}
@media screen and (max-width: 400px) {
.stack {
width: 100px;
height: 100px;
}
最佳答案
此 css 将提供 100% 的浏览器宽度,以防止 div 之间出现间隙。
问题:每个 @media 中需要并排放置多少张图像?
.stack {
width: 25%; /* because 4 x 100px = 400px */
}
.stack img {
display: block;
width: 100%; /* 100% within a div */
height: auto; /* to prevent distortion of an image */
margin: auto; /* to center small images */
}
/* lines below are not necessary, removing is no problem */
@media screen and (max-width: 767px) {
.stack img {
max-width: 175px;
}
}
@media screen and (max-width: 400px) {
.stack img {
max-width: 100px;
}
}
关于html - 当网页缩小时使图像堆叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58820233/