Question

我想将图像放置在矩形内，并在矩形静止不动时将图像向右移动。我的问题是我无法在不移动矩形的情况下将图像放置在矩形内。在特定的屏幕尺寸下我得到了想要的结果通过使用边距并定位图像，但是当我调整窗口大小时，它将不在同一位置。

如何将其保留在矩形内同一位置的图像中？

body { 
    margin: 0px;
}

.top-shelf {
    height: 5vh;
    width: 100vw;
    background-color: rgb(40, 121, 197);
    opacity: 50%;
}

.logo-outline {
    border-radius: 35px;
    border: 5px solid rgba(4, 22, 29, 0.137);
    width: 130px;
    height: 130;
    margin-top: 1%;
    margin-left: 3%;
    padding: 30px;
}


.rotate-logo{
    position: absolute;
    top: 7%;
    left: 3%;
    transition: all 4s;
    -webkit-transition: all 4s; 
    transform: translate(130px, 0);
    -webkit-transform: translate(130px,0);
    background-image: url('owl-logo.png');
    
}


.text-heading{
    text-align: center
}

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8"/>
<title>Cool Name</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="top-shelf"></div>
    <div class="logo-outline">
            <img src="https://i.pinimg.com/originals/f1/90/8e/f1908e1ee89bc192c02e5dcb95296f5f.png" class="rotate-logo" width="70" height="70">
    </div>
    <div class="text-heading">
        <h1 style="font-family: courier;">Cool title</h1>
    </div>

</body>
</html>

强文本

Answer 1

您可以尝试做的一件事就是让图像停留在div中，使其像往常一样在页面上流动。如果图像仅位于div中，则应自动调整其大小以适合其内容。然后，您可以使用页边距或变换之类的CSS属性来影响图像的位置。

#logo-outline {
  border-radius: 35px;
  border: 5px solid rgba(4, 22, 29, 0.137);
  width: 130px;
  padding: 2px;
}

#rotate-logo {
  height: 70px;
  transition: transform ease 100ms;
}

#logo-outline:hover #rotate-logo {
  transform: translateX(60px);  /* 130px - 70px width */
}

<div id="logo-outline">
  <img src="https://i.pinimg.com/originals/f1/90/8e/f1908e1ee89bc192c02e5dcb95296f5f.png" id="rotate-logo">
</div>

如何将动画图片放置在固定的矩形内？

1 个答案: