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>

编辑

让我们添加一些扩展说明

有很多关于id 和类的区别的有用文章。

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

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

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

1 个答案: