时间戳

首页 > 解决方案 > 如何使绝对定位的图像与下面的相同图像大小相同（以％为单位，响应式）

html - 如何使绝对定位的图像与下面的相同图像大小相同（以％为单位，响应式）

问题描述

我有一个静态和活动版本的 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;
}

标签： htmlcsstwitter-bootstrapcss-position

解决方案

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

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

推荐阅读