Как сделать абсолютно позиционированное изображение одинакового размера (в%, отзывчивым), чем то же изображение под ним

Question

У меня есть статическая и активная версия GIF, статическая версия абсолютно позиционируется поверх другой, так что, когда я наведу на нее курсор, она исчезает, и GIF играет.Но я не могу понять, как сделать их одинакового размера таким образом, чтобы он был адаптивным.

Я пробовал разные подходы к их размеру, но ни один из них не является достаточно отзывчивым

В этом коде есть код, он действительно простой и короткий.

https://codepen.io/anon/pen/ErXvXb

это HTML, я удалил 2 других столбца, чтобы не отвлекать, но идеязаставить его работать на 3 столбцах

<div style="margin:0;padding:2rem 2rem;min-height:100vh;display: flex;align-items: center;">
  <div class="row" style="display: flex;align-items: start;">
  <div class="col-md-4" style="text-align: center;">
    <img class="static" style="width: 85%;" src="http://nodorojo.com/img/responsive.png"><img class="active" style="width: 85%;" src="http://nodorojo.com/img/responsive.gif">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, distinctio, cum iusto esse pariatur consectetur eligendi itaque quos totam voluptas rem mollitia voluptatem veniam reiciendis omnis, saepe eaque animi qui.</p>
  </div>
</div>
</div>

и css

.static {
  position: absolute;
}

.static:hover {
  opacity: 0;
}

Answer 1

удаление отступов из родительского div решит вашу проблему.

.static {
  position: absolute;
}

.static:hover {
  opacity: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div style="margin:0;padding:2rem 2rem;min-height:100vh;display: flex;align-items: center;">
  <div class="row" style="display: flex;align-items: start;">
  <div class="col-md-4 p-0" style="text-align: center;">
    <img class="static" style="width: 85%;" src="https://cdn.makeawebsitehub.com/wp-content/uploads/2016/02/learn-code-e1455713167295.jpg" alt="image 1"><img class="active" style="width: 85%;" src="https://c.pxhere.com/photos/20/e5/programming_computer_environment_syntax_highlight_program_computing_display_hacker-1172040.jpg!d"alt="image 2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, distinctio, cum iusto esse pariatur consectetur eligendi itaque quos totam voluptas rem mollitia voluptatem veniam reiciendis omnis, saepe eaque animi qui.</p>
  </div>
</div>
</div>

Answer 2

добавить класс p-0 для внешнего div.надеюсь, это поможет вам.см. ссылку ниже.спасибо;

https://codepen.io/Xenio/pen/vbZebX7777