html - 在网页缩小时使图像堆叠

Question

在实现媒体屏幕查询时，我似乎无法让这两张图片正确缩小。我希望它们堆叠在一起。这是我在移动设备上增加两个图像的大小时所拥有的，尽管存在媒体查询。

<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;
  }

Answer 1

此 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;
  }
}