CODEWITHSUNDEEP
htmlcss
Cubex
Cubex

Reputation: 37

Image shifting to left or right when resizing the page

I inserted an image in my HTML and styled it with CSS, but when I resize the page, the image just shifts to the left or right. I want it to stay the same position.

.imagee {position:relative}

.circle {
  border-radius: 50%;
  width: 300px;
  height: 300px;
  margin:0 auto;
  transform: translate(-345px, 0px);
}
<div class="imagee">
<img class="circle" src="https://dummyimage.com/600x400/000/fff" align="right" />
</div>

Upvotes: 0

Views: 1817

Answers (4)

Shaikh Nadeem
Shaikh Nadeem

Reputation: 84

put your image height auto and width is on percentage(%) and margin auto 

.imagee {
  width: 30%; //30% of your screen size
  height: auto;
  margin: auto;
}

.circle {
  border-radius: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-345px, 0px);
margin:auto;
}

see reference https://jsfiddle.net/Nadeem_Shaikh/tgLyr8aq/2/

Upvotes: 0

Ashutosh Kumar
Ashutosh Kumar

Reputation: 907

So, Your expected result can be achieved by implementing absolute positioning. You certainly now need to define your position from the left to make sure it stays where you placed it!

.imagee {position:relative}

.circle {
  border-radius: 50%;
  width: 300px;
  height: 300px;
  margin:0 auto;
  left : 700px;
  position : absolute;
  transform: translate(-345px, 0px);
}
<div class="imagee">
<img class="circle" src="https://dummyimage.com/600x400/000/fff" align="right" />
</div>

Upvotes: 1

Akbar Ali
Akbar Ali

Reputation: 456

Please refer to the transform property in css.

transform: translate(-345px, 0px); means your image is going to have an offset of -345px from x-cordinate.

Upvotes: 0

Varsha Dhadge
Varsha Dhadge

Reputation: 1751

Try using flex to your parent div & remove transform: translate(-345px, 0px);

.imagee {position:relative;width:100%;display:flex;justify-content:left;align-items:center;}

.circle {
  border-radius: 50%;
  width: 300px;
  height: 300px;
}
<div class="imagee">
<img class="circle" src="https://dummyimage.com/600x400/000/fff" align="right" />
</div>

Upvotes: 2

Related Questions