CODEWITHSUNDEEP
javascripthtmlcss
flarow432
flarow432

Reputation: 65

Image keeps moving to the right or left depending on resize

I'm having some trouble with keeping my image fixed while resizing. I'm pretty new to HTML and CSS but I'll try my best to explain.

I have this HTML and CSS Code: 

#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>

I was experimenting with some things that I found on this website but nothing was working. Basically, I have an image that I want to appear in one place at all times, always in the top middle, no matter how big or small I resize my window. Currently, the image stays fine until I hit a certain size when I resize my window, and it starts slowly moving right while I am resizing my window. Then it stays at this new position until I reach another point where it starts to keeping moving right again.

I want to know how I can get this image to stay in one place even if I resize my window. Any help would be greatly appreciated. Thanks in advance.

Upvotes: 1

Views: 1012

Answers (1)

omukiguy
omukiguy

Reputation: 1437

The issue is with setting min-width on .sky-img. Just limit it to width. min-width makes it flexible yet the margin: 0 auto; works with a limited width.

#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>

Upvotes: 1

Related Questions