1

I tried few links but dint get anything fruitful. I am working on this

http://www.w3schools.com/cssref/pr_pos_clip.asp

but in my case I need to clip the image on "%" rather than putting some predefined px values. However I can not do this .

How to achieve that ??

Nihar
  • 553
  • 1
  • 10
  • 29

2 Answers2

0

The Clip property doesn't support percentages (yet). To achieve that effect, you can either:

1) Wrap the image in a div, set percentage width and height and overflow: hidden; For example:

<div id="test">
    <img src="https://www.google.com/images/srpr/logo11w.png">
</div>

div#test {
    width: 200px;
    height: 100px;
    overflow: hidden;
}

JSFiddle

2) Instead of the image, use a div with percentage width and height and the image set as a background-image.

3) Use javascript to calculate the required width and height after the image has been rendered and work with that.

user1853181
  • 813
  • 6
  • 12
  • with this i will get a squeezed image ,what I want is like from the origin 10% of width and 10 % of height. – Nihar Jan 15 '14 at 06:55
  • Which one of the 3 methods I recommended did you try? Did you try the other two? I have included an example that does what you wanted in my answer. – user1853181 Jan 15 '14 at 07:10
0

If you want to do it in percentages, you can achieve it with an additional extra wrapper div with dimensions same as image.

Try following CSS and HTML.

HTML

<div class="wrapper">
    <div class="imgContainer">
      <!-- NOTE: image dimensions are same as in "wrapper" class-->
      <img src="path/to/img.jpg" width="200" height="140" />
    </div>
</div>

CSS

.wrapper{
    width : 200px;
    height : 140px;
}
/* Below width and height are in percentage w.r.t. those in 
   'wrapper' class whose width and height are same as image.
*/
.imgContainer{
    width : 50%;
    height : 50%;
    overflow : hidden;
}

Check this fiddle.

Niranjan Borawake
  • 1,628
  • 13
  • 20