具有相同位置的CSS响应式图像

Question

我用引导程序创建一页并添加3个svg图像。现在，在桌面上看起来不错，但是当我在移动设备上更改视图时，两个图像消失了。如何解决此移动视图？

这是桌面截图

当我丢失两张图片时，这是可移动的

HTML：

<div class="col-lg-12 row-1 mid">
  <div class="col-lg-8">
    <img class="img-fluid img-icon icon1" src="img/icon/web-dizajn.svg" alt="Potrebna vam je pomoc oko izrade web sajta?">
    <img class="img-fluid img-icon icon2" src="img/icon/graficki-dizajn.svg" alt="Potrebna vam je pomoc oko izrade web sajta?">
    <img class="img-fluid img-icon icon3" src="img/icon/web-hosting.svg" alt="Potrebna vam je pomoc oko izrade web sajta?">
  </div>
  <div class="col-lg-4">
    <h4>Web Dizajn</h4>
    <p></p>
    <p>
      <a href="#">Pročitaj više</a>
    </p>
  </div>
</div>

CSS：

.row-1 {
    display: flex;
}
.mid {
    text-align: center;
    background: linear-gradient(to top, #ffffff 0, #ffffff 100%);
    border-radius: 35px;
    padding: 50px;
    border: 15px solid #f7f7f7;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
.img-icon {
    width: 50%;
}
.icon1 { padding:0px; }
.icon2 { position: absolute; left: 0; padding:75px; top:50px; }
.icon3 { position: absolute; right: 0; padding:75px; top:50px; }

Answer 1

当视口大小小于992px时，带填充的图标大小为150px。由于您的填充为75px，因此左侧和右侧的填充会“吃掉”整个宽度空间（75 + 75 = 150），从而没有空间显示实际图像。您需要使用CSS媒体查询来减少填充，例如：

@media (max-width: 991px) {
    .icon2 { position: absolute; left: 0; padding:35px; top:50px; }
    .icon3 { position: absolute; left: 0; padding:35px; top:50px; }
}

也可以更改最高值。尝试不同的值，直到获得准确的外观为止。

Answer 2

在现场演示中，似乎您正在使用填充来减小svn图像的大小。问题是填充大于容器，导致图像的内部宽度和高度为0。请考虑像使用第一幅图像一样使用宽度和高度百分比，或使用媒体查询来减少移动设备上的填充值。

Answer 3

当减小屏幕尺寸时，您将需要编辑.icon2和.icon3的css，以便填充不会导致图像消失，从而没有空间显示图像。

尝试一下

@media (max-width: 992px) {
  .icon2 {
    padding:10px;
    top:20px;
  }
  .icon3 {
    padding:10px;
    top:20px;
  }
}

992px是大屏幕更改之前的最大宽度。整个位置和左边都一样。

Answer 4

您需要在移动分辨率中更改icon2和icon3的位置，然后尝试删除这些图标的填充。如果您张贴了一个小矮人，将给出确切的解决方案将很有帮助。