Bootstrap 带 svg 过滤器的流体 img

Question

我正在对 Bootstrap 上的响应图像应用 SVG 过滤器。我正在应用 class="img-fluid"

我不知道如何在每种分辨率下保持图像之间的相同分隔。适用于桌面但在移动设备上分离太大

这里是代码片段https://codepen.io/fernandocomet/pen/ExVBrrR?editors=1100

我的容器上有：

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

欢迎任何帮助

Answer 1

我已经修改了代码，让容器之间的间隔间隙保持在 5%（您可以根据需要调整）。

.container {
  position: relative;
  margin: 5%;
  /*width: 100%;*/
  /*height: 100vh;*/
}


/*
.container img {
  position: absolute;
}
*/

.filtered {
  width: 100%;
  filter: url(#duotone);
  transition: opacity 1s;
}

.filtered:hover {
  opacity: 0;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>
  <svg version="1.1" width="0" height="0" class="filter-rot">
    <filter id="duotone" color-interpolation-filters="sRGB">
      <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" result="gray"></feColorMatrix>
    </filter>
  </svg>

  <div class="container px-0">
    <img src="https://www.fernandocomet.com/img/desktop/adcrackdown.png" class="img-fluid position-absolute" />
    <img src="https://www.fernandocomet.com/img/desktop/adcrackdown.png" class="img-fluid filtered" />
  </div>

  <div class="container px-0">
    <img src="https://www.fernandocomet.com/img/desktop/ifemafitur.png" class="img-fluid position-absolute" />
    <img src="https://www.fernandocomet.com/img/desktop/ifemafitur.png" class="img-fluid filtered" />
  </div>
</body>

</html>

Bootstrap 带 svg 过滤器的流体 img

Bootstrap fluid img with svg filter

css

svg

bootstrap-4

responsive

fluid