Question

我在调整大小时保持图像固定方面遇到了一些麻烦。我是HTML和CSS的新手，但我会尽力解释。

我有这个HTML和CSS代码：

#container {
  min-width:150px;
  height: 200px;
  margin: 0 auto;
}


.sky-img {
  width: 100px;
  height:auto;
  margin: 0;
}

<div id="container">
   <div class="div-wrapper">
     <img src="img/sky.jpg" class="sky-img">
    </div> 
</div>

我正在试验我在这个网站上找到的一些东西，但没有任何工作。基本上，我有一个图像，我想在任何时候出现在一个地方，总是在顶部中间，无论我调整窗口的大小。目前，当我调整窗口大小时，图像保持正常，直到我达到一定大小，并且当我调整窗口大小时，它开始慢慢移动。然后它停留在这个新位置，直到我到达另一个点，它开始再次向右移动。

我想知道即使调整窗口大小，我仍然可以将此图像保留在一个位置。任何帮助将不胜感激。提前致谢。

Answer 1

问题在于min-width上设置.sky-img。只需将其限制为width即可。 min-width使其灵活，margin: 0 auto;的工作宽度有限。

#container {
width:150px;
height: 200px;
margin: 0 auto;
}

.sky-img {
  width: 100px;
  height:auto;
  margin: 0;
}

<div id="container">
   <div class="div-wrapper">
     <img src="https://images.unsplash.com/photo-1512926182919-fd3c6c6f01bb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f48d3bba705f3d16eb60a05ab4b2fe4d" class="sky-img">
    </div> 
</div>

根据调整大小

1 个答案: