Bootstrap жидкое изображение с фильтром SVG - PullRequest
Новая
       24

Bootstrap жидкое изображение с фильтром SVG

0 голосов
/ 29 мая 2020

Я применяю фильтр SVG к адаптивным изображениям на Bootstrap 4. Я применяю class = "img-fluid"

Я не знаю, как сохранить одинаковое разделение между изображениями для каждого разрешения. Работает для настольных компьютеров, но на мобильных устройствах разделение слишком велико

Здесь фрагмент кода https://codepen.io/fernandocomet/pen/ExVBrrR?editors=1100

В моем контейнере: 

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

Любая помощь приветствуется

1 Ответ

1 голос
/ 29 мая 2020

Я изменил код, чтобы зазор между контейнерами оставался на уровне 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>
...