CODEWITHSUNDEEP
csshtml
Roli Agrawal
Roli Agrawal

Reputation: 2466

how to hide image left part of image when using overflow hidden

I am new to CSS programming . Using overflow:hidden for hiding image greater than DIV area. Perhaps I want hidden part of image should be in the left part, but currently its taking right part. My code follows as below.

Html code:

<div class="a1">
<img src="img/image4.jpg">
</div>

CSS:

 .a1{height:200px;width:100px; overflow:hidden;}

Upvotes: 3

Views: 3858

Answers (4)

Jahanzaib Ahmad
Jahanzaib Ahmad

Reputation: 23

.a1 {
  height:200px;
  width:100px;
  overflow:hidden;
  direction: rtl;
}
<div class="a1">
  <img src="https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>

Upvotes: 1

Progeeker
Progeeker

Reputation: 124

use float:right for image element

<div style="width:200px; height:200px; overflow:hidden">

    <img style="float:right" src="url" />

</div>

Upvotes: -1

user1932079
user1932079

Reputation: 

.a1 {
  height:200px;
  width:100px;
  overflow:hidden;
  background:#ff0;
}
<div class="a1">
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b">
</div>

Seems to work fine for me. I added the yellow background to show where the DIV is at and linked to an SO sprite.

If you're getting a different effect, then it's quite likely the CSS on your page elsewhere which is cascading and causing the conflict.

Side note: Writing a stylesheet in CSS is not really called "programming". :)

Click Run code snippet to see this in action.

Or, for the converse:

.a1 {
  height:200px;
  width:100px;
  overflow:hidden;
  background:#ff0;
}
<div class="a1">
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b" align="right">
</div>

Upvotes: 1

twain
twain

Reputation: 1325

Try this (notice the direction: rtl;):

.a1 {
  height:200px;
  width:100px;
  overflow:hidden;
  direction: rtl;
}
<div class="a1">
  <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b">
</div>

Upvotes: 6

Related Questions