CODEWITHSUNDEEP
htmlcss
Legionar
Legionar

Reputation: 7607

Align image inside div to right

I have div which has smaller width than image inside it and div has set overflow to hidden. So the image is visible only some part from the left.

I want to see that image some part but from right.

html

<div id="my_div">
    <img src="some_image.jpg" width="600" />
</div>

css

#my_div {
    position: relative;
    width: 300px;
    overflow: hidden;
}

So I see only 50% of that image from left. I want to see 50% of that image from right. I dont want to see whole image. How can be done this?

EDIT

I cant set CSS:

position: absolute;
right: 0px;

Is there another solution?

Upvotes: 0

Views: 1580

Answers (5)

Skabr
Skabr

Reputation: 11

You can use flexbox for solving this problem

justify-content: flex-end;

fiddle here

Upvotes: 1

DNReNTi
DNReNTi

Reputation: 521

Try something like this:

#my_div {
    width: 300px;
    overflow: hidden;
    position: relative;
}

#my_div img {
    position: absolute;
    right: 0;
}

Second Solution you may also do this

#my_div {
    width: 300px;
    overflow: hidden;
}

#my_div img{
    float:right;
}

It is working fine, but i still dont understand why are you using an image what you dont want to see on the website. Why dont you just crop it? :)

Upvotes: 1

Vasco
Vasco

Reputation: 301

Give the parent div a relative position. And wrap the image in a child div and make that absolute.

HTML 

<div id="my_div">
<img src="some_image.jpg" width="600" height="300" />
</div>

CSS

#my_div {
    height:300px;
    width: 300px;
    overflow: hidden;
    position:relative;
}

#my_div img{
    position:absolute;
    right:0;
}

JSFiddle

Upvotes: 1

Giorgio
Giorgio

Reputation: 1970

What about float:right; property? Thanks to hidden overflow, you can see only the right part of the image.

#my_div img {
    float:right;
}

Fiddle

Upvotes: 1

Danield
Danield

Reputation: 125641

Solution #1:

float the img to the right

FIDDLE

#my_div {
  width: 300px;
  overflow: hidden;
  border: 1px solid green;
}
#my_div img {
  float: right;
}
<div id="my_div">
  <img src="http://placehold.it/600x150" width="600" />
</div>

Solution #2:

Set direction: rtl; on the container

FIDDLE

#my_div {
  width: 300px;
  overflow: hidden;
  border: 1px solid green;
  direction: rtl;
}
<div id="my_div">
  <img src="http://placehold.it/600x150" width="600" />
</div>

Upvotes: 1

Related Questions