在缩放图像上使用绝对定位的 CSS 会导致图像的进一步缩放

Question

感谢您的回复。我将图像加载到相对定位的容器中。这些图像被缩放到其大小的 17%。我想使用绝对定位来更改这些图像在我的屏幕上的位置（必需）。但是，当我这样做时，图像似乎又重新缩放了自己。我不确定我做错了什么，但是我会说，当我在不同的图像上使用相对定位时，我完全没有问题。一个蹩脚的工作是使用 transform :scale 在移动后放大图像，但我不确定为什么我会遇到这个问题。 - 谢谢！

#div2{
        width: 700px;
        background-color: green; 

    }
  
    #div3{
        width: 900px;
        background-color: orange; 
        position: relative; 
    }
  
   #blob {
        display: inline-block;
        width: 17%;
        height: 17%; 
        object-fit: contain;
        position: absolute;
        right : 160px;
        bottom: 315px;  
    }

<div id="div3">
  <div id="div2"> 
    <img id="blob" src="imgs/blobt.png" alt="blob"> 
  </div>
</div>

Answer 1

您的代码不起作用。
你应该大部分时间都在使用类来做样式。

如果我为父元素设置一个 height 并为它工作的图像设置一个 z-index。

.div2{
  width: 700px;
  height: 700px;
  background-color: green; 
}

.div3{
  width: 900px;
  height: 900px;
  background-color: orange; 
  position: relative; 
}
  
.blob {
  display: inline-block;
  width: 17%;
  height: 17%; 
  object-fit: contain;
  position: absolute;
  right : 160px;
  bottom: 315px;  
  z-index: 10;
}

<div class="div3">
  <div class="div2"> 
    <img class="blob" src="https://images.unsplash.com/photo-1619366501246-e8f14df10fcb?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Mountain waterfall"> 
  </div>
</div>

编辑

让我们添加一些扩展解释

关于ids和classes的区别有很多有用的文章。

我个人的观点，我尝试保留 ids 来进行 JavaScript 操作，寻找唯一键而不是类的性能更高，ids 对于使用链接进行页面导航也很有用。所以，这就是为什么我不喜欢将它们用于样式，并且类对于（不要）不重复自己（DRY）很有用，您可以一遍又一遍地使用它，因此您可以使用 id 设置 div 的样式，后来你意识到你需要完全相同的 css 用于另一段 html，你不能添加另一个 id 标记。

% 宽度和高度是根据具有这些属性的第一个祖先计算的。否则浏览器无法进行计算。