如何让比下相同的图像绝对定位图像相同的尺寸（以％，响应）

Question

我有一个GIF的静态和积极的版本，静态版本是绝对定位在其他这样，当我徘徊，它自败和GIF戏剧。但我无法弄清楚如何让他们的方式，响应完全相同的尺寸。

我试图就如何大小他们，但是，他们没有足够的响应不同的方法

这codepen了代码，这是非常简单和短暂。

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

添加对 - 0类的外层div。希望这可以帮助你。请参阅以下链接。谢谢;

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