锚标签破坏幻灯片的CSS布局

Question

作为项目的一部分，我目前正在实践电子商务网站上工作。

我要在幻灯片显示的图像周围添加定位标记。但是我发现，一旦添加了定位标记，它就会更改幻灯片中图像的布局，并且它们的大小不再适合幻灯片容器中的大小。图像的一部分被切掉。

请看下面的屏幕截图，显示添加锚标记之前和之后的外观。

我的HTML和CSS代码也在下面显示。

添加定位标记之前（我希望图像如何通过定位标记保持大小）

添加锚标记后

HTML代码：

<div class="homepage-slider">
    <a href="moreinfo/product6.html"><img src="images/hero-banner/mfprotein.jpg" alt="Protein Deals" /></a>
    <a href="moreinfo/product34.html"><img src="images/hero-banner/plant-protein.jpg" alt="Protein Deals" />
    <a href="moreinfo/product2.html"><img src="images/hero-banner/image5.jpg" alt="Protein Deals" /></a>
    <a href="moreinfo/product45.html"><img src="images/hero-banner/imaged3.jpg" alt="Protein Deals" /></a>
    <a href="moreinfo/product19.html"><img src="images/hero-banner/mfprotein.jpg" alt="Protein Deals" /></a>
</div>

CSS代码： / ------------------------------------首页横幅部分------ ---------------------------- /

#homepage-banner {
    width: 100%;
    position: relative;
    justify-content: space-around;
    height: 82vh;
    overflow: hidden;
}

.homepage-slider img {
    display: inline-block;
}

.homepage-slider {
    top: 3.5em;
    width: 500%;
    position: absolute;
    display: flex;
    animation: 24s slider infinite;
}

Answer 1

通过用vw替换％，它将强制图像适合容器。

#homepage-banner {
  width: 100vw; // from % to vw
  position: relative;
  justify-content: space-around;
  height: 82vh;
  overflow: hidden;
}

.homepage-slider img {
  width: 100vw; // from % to vw
  display: inline-block;
}

.homepage-slider {
  top: 3.5em;
  width: 500vw; // from % to vw
  position: absolute;
  display: flex;
  -webkit-animation: 24s slider infinite;
          animation: 24s slider infinite;
}

<div id="homepage-banner">
  <div class="homepage-slider">
    <a href="moreinfo/product6.html"><img src="https://images.unsplash.com/photo-1538370621607-4919ce7889b3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5e6ce231bf8fa9c6125a08389840e7d7&auto=format&fit=crop&w=2249&q=80" alt="Protein Deals" /></a>
    <a href="moreinfo/product34.html"><img src="https://images.unsplash.com/photo-1538370621607-4919ce7889b3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5e6ce231bf8fa9c6125a08389840e7d7&auto=format&fit=crop&w=2249&q=80" /></a>
    <a href="moreinfo/product2.html"><img src="https://images.unsplash.com/photo-1538370621607-4919ce7889b3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5e6ce231bf8fa9c6125a08389840e7d7&auto=format&fit=crop&w=2249&q=80" alt="Protein Deals" /></a>
    <a href="moreinfo/product45.html"><img src="https://images.unsplash.com/photo-1538370621607-4919ce7889b3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5e6ce231bf8fa9c6125a08389840e7d7&auto=format&fit=crop&w=2249&q=80" alt="Protein Deals" /></a>
    <a href="moreinfo/product19.html"><img src="https://images.unsplash.com/photo-1538370621607-4919ce7889b3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5e6ce231bf8fa9c6125a08389840e7d7&auto=format&fit=crop&w=2249&q=80" alt="Protein Deals" /></a>
  </div>
</div>