如何使绝对定位的图像与下面的相同图像大小相同（以 % 表示，响应）

Question

我有一个 gif 的静态和活动版本，静态版本绝对位于另一个之上，因此当我将其悬停时，它会消失并播放 gif。但是我不知道如何以响应的方式使它们的大小完全相同。

我尝试了不同的方法来确定它们的大小，但是，none 它们的响应速度足够快

这个codepen有代码，真的很简单也很短。

这是 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 添加 p-0 class。希望这对你有帮助。参考下文 link。谢谢;

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

Answer 2

从父项中删除填充 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>

如何使绝对定位的图像与下面的相同图像大小相同（以 % 表示，响应）

How to make absolutely positioned image same size (in %, responsive) than same image underneath

html

css

css-position

twitter-bootstrap