时间戳

首页 > 解决方案 > 当网页缩小时使图像堆叠

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

问题描述

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

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

标签： htmlcss

解决方案

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

推荐阅读