两个响应式交叉渐变图像并排

Question

我正在创建一个新网站，我在不同的 div 正文中并排创建了两个淡入淡出图像。这些淡入淡出的图像在全屏上工作得很好，但是当我缩小浏览器的屏幕时，图像保持与原来相同的像素。我希望这些图像根据响应式网站等设备缩小并适合屏幕我想让这些淡入淡出图像响应。

.wrapper {
  display: flex;
}

.le,
.ri {
  height: 30%;
  width: 50%;
}

.le {
  float: left;
  align-self: center;
}

.ri {
  float: right;
  align-self: center;
}

</style><style type="text/css">.responsive {
  width: 761px;
  max-width: 100%;
  height: auto;
}

</style><style type="text/css">.responsive1 {
  width: 761px;
  max-width: 100%;
  height: auto;
}

</style><style type="text/css">#cf img {
  position: absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.responsive1:hover {
  opacity: 0;
}

</style><style type="text/css">#cf1 img {
  position: absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf1 img.responsive2:hover {
  opacity: 0;
}

<div class="wrapper">
  <div id="cf" class="le">
    <a href="#">
      <img class="responsive" src=".jpg">
      <img class="responsive1" src=".jpg">
    </a>
  </div>
  <div id="cf1" class="ri">
    <img class="responsive" src=".jpg" />
    <img class="responsive2" src=".jpg" />
  </div>
</div>

Answer 1

您有不同的选项来使图像响应。

一个简单的解决方案是将图像设置为 100% 宽度。然后图像会变大和变小。

另一种解决方案是对图像使用 flex box 并使用 flex box 配置收缩和增长行为。

您也可以使用 Media Queries 并且仅将宽度设置为 100% 在特定设备宽度之前或之后。

两个响应式交叉渐变图像并排

Two Responsive Crossfading Images side by side

html

css

image

css-animations