图像根据调整大小不断向右或向左移动

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

问题在于在.sky-img上设置min-width 。 只需将其限制为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>