Question

我正在尝试使用3张图片创建横幅，如this codepen中所示如果视图超过1200像素，则视图就可以，但是当屏幕尺寸减小时，它就会重叠。

.yourlimit img:first-child{
    position: absolute;
    left: -8%;
    bottom: 0;
}
.yourlimit img:last-child{
    position: absolute;
    bottom: 40%;
    right: -8%;
}

<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container px-md-0 my-5 mx-auto position-relative text-center yourlimit">
        <img class="" src="https://i.ibb.co/GWFDsFk/limit-left-border.png" alt="">
        <img class="img-fluid" src="https://i.ibb.co/t2388tK/limit-img.png" alt="">
        <img class="" src="https://i.ibb.co/XjHJ1dZ/limit-right-border.png" alt="">
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</html>

任何想法都会受到赞赏。

Answer 1

首先，我建议使主中心图像（https://i.ibb.co/t2388tK/limit-img.png）的两端都没有白线，这些白线已经覆盖了某些文本-无法在浏览器和屏幕尺寸之间对齐

接下来，我通过调整CSS达到了预期的效果。我删除了bottom规则，因为这阻止了图像在顶部对齐，这使调整IMO更加容易。我还将第一张图像设置为left: 0;，最后一张图像设置为right: 0。

从那里开始，您需要调整以下规则，直到获得所需的每个图像的宽度为止：

每张图像的宽度（以百分比表示的自适应布局）
如果确实需要，可以使用绝对定位，但是我认为没有必要。

这是我要插入Codepen的新CSS。请注意，我在图像周围放置了红色边框，以了解它们的位置-完成后，显然将其删除。


    img {
        border: solid red 1px;
    }
    .yourlimit img:first-child{
        position: absolute;
        left: 0;
        width: 20%;
    }

    .yourlimit .img-fluid {
      width: 80%;
    }

    .yourlimit img:last-child{
        position: absolute;
        right: 0;
        width: 20%;
    }

Answer 2

您可以使用媒体查询来定位两个图像，以便在较小的屏幕上缩小尺寸。

例如：

@media screen and (max-width: 600px) {
  .yourlimit img:last-child{
      width: 50%;
  }

  .yourlimit img:first-child{
      width: 50%;
  }
}

请注意，您将必须调整宽度，以确定最适合您的用例的宽度。

Answer 3

随着屏幕宽度变小，容器也会收缩。因此，您的左右图像是收缩容器的+ -8％。最简单的选择是为容器提供中心图像的宽度：

.container {
  width: 1140px;
}

使用CSS响应多个图像以创建单个图像

3 个答案: