用悬停图像更改制作一排图像的更清洁方法？答案

【问题标题】：cleaner way to make a row of images with hover image change?用悬停图像更改制作一排图像的更清洁方法？
【发布时间】：2021-01-04 06:50:47
【问题描述】：

我想知道是否有更清洁/有效的方法来制作这个小提琴https://jsfiddle.net/L53e840z/4/。这样做的问题是，如果窗口变小或变大，则图像之间会有这个空白，因为它取决于它的父宽度。为了使其正常工作，父级还设置为一个奇怪的特定“vw”测量值，如果排列发生变化，该测量值会中断，我希望它的图像与窗口的 100% 高度保持成比例，没有空格，并且父级自动调整它的宽度覆盖所有子元素。我是网络开发新手，想了解处理图片的最佳做法。

我所做的解释-> 它是一个容器，其中有一个父元素，其中有一个设置为 flex 的包装器。该包装器内部有 6 个图像包装器 - 每个内部都有 2 个图像设置为绝对图像，因此它们彼此重叠。悬停时，前面的图像会消失并显示后面。

HTML

<div id="stills-ba" data-tab-content>
            <div class="stills-ba">
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="https://www.placecage.com/200/300" alt="still front">
                  <img class="back-img" loading="lazy" src="https://www.placecage.com/c/200/300" alt="still back">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="https://www.placecage.com/200/300" alt="still FRONT">
                  <img class="back-img" loading="lazy" src="/https://www.placecage.com/c/200/300">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="https://www.placecage.com/200/300" alt="still front">
                  <img class="back-img" loading="lazy" src="https://www.placecage.com/c/200/300">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="https://www.placecage.com/200/300">
                  <img class="back-img" loading="lazy" src="https://www.placecage.com/c/200/300">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="https://www.placecage.com/200/300">
                  <img class="back-img" loading="lazy" src="https://www.placecage.com/c/200/300" alt="still 1">
               </div>
               <div class="still-wrapper-ba">
                  <img class="front-img" loading="lazy" src="https://www.placecage.com/200/300">
                  <img class="back-img" loading="lazy" src="https://www.placecage.com/c/200/300" alt="still back">
               </div>
            </div>
         </div>

CSS

#stills-ba {
   width: 200vw;
   height: 100vh;
}

.stills-ba {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: 100%;
   height: 100%;

}
.still-wrapper-ba {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: 33vw;
   height: 100vh;
}

.front-img {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: auto;
   -webkit-transition: opacity ease 250ms;
   -o-transition: opacity ease 250ms;
   transition: opacity ease 250ms;

}

.back-img {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: auto;
   opacity: 1;
   z-index: -5;
}

.front-img:hover {
   opacity: 0;
}

【问题讨论】：

我可能在这里看不到任何东西，但是您不能将图像的宽度设置为 100% 吗？所以 .front-img 和 .back-img 100% 而不是自动宽度
这不是让图像变得奇怪吗？我想要一种保留纵横比但不会导致空白的方法
啊好吧，没完全明白，抱歉:)

标签： html css image flexbox

【解决方案1】：

如果我理解正确，唯一的问题来自调整屏幕大小时每张照片之间的空白？这是一个解决方案：https://jsfiddle.net/cu0L87wr/

#stills-ba {
  height: 100vh;
}

.stills-ba {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
}
.still-wrapper-ba {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
}

.front-img {
  height: 100%;
  width: auto;
  -webkit-transition: opacity ease 250ms;
  -o-transition: opacity ease 250ms;
  transition: opacity ease 250ms;
}

.back-img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  opacity: 1;
  z-index: -5;
}

.front-img:hover {
  opacity: 0;
}

    <div id="stills-ba" data-tab-content>
      <div class="stills-ba">
        <div class="still-wrapper-ba">
          <img
            class="front-img"
            loading="lazy"
            src="https://www.placecage.com/200/300"
            alt="still front"
          />
          <img
            class="back-img"
            loading="lazy"
            src="https://www.placecage.com/c/200/300"
            alt="still back"
          />
        </div>
        <div class="still-wrapper-ba">
          <img
            class="front-img"
            loading="lazy"
            src="https://www.placecage.com/200/300"
            alt="still FRONT"
          />
          <img
            class="back-img"
            loading="lazy"
            src="https://www.placecage.com/c/200/300"
          />
        </div>
        <div class="still-wrapper-ba">
          <img
            class="front-img"
            loading="lazy"
            src="https://www.placecage.com/200/300"
            alt="still front"
          />
          <img
            class="back-img"
            loading="lazy"
            src="https://www.placecage.com/c/200/300"
          />
        </div>
        <div class="still-wrapper-ba">
          <img
            class="front-img"
            loading="lazy"
            src="https://www.placecage.com/200/300"
          />
          <img
            class="back-img"
            loading="lazy"
            src="https://www.placecage.com/c/200/300"
          />
        </div>
        <div class="still-wrapper-ba">
          <img
            class="front-img"
            loading="lazy"
            src="https://www.placecage.com/200/300"
          />
          <img
            class="back-img"
            loading="lazy"
            src="https://www.placecage.com/c/200/300"
            alt="still 1"
          />
        </div>
        <div class="still-wrapper-ba">
          <img
            class="front-img"
            loading="lazy"
            src="https://www.placecage.com/200/300"
          />
          <img
            class="back-img"
            loading="lazy"
            src="https://www.placecage.com/c/200/300"
            alt="still back"
          />
        </div>
      </div>
    </div>

我从包装器 (#stills-ba) 中删除了 width 属性和 .front-img 的绝对位置。

【讨论】：