3

I have a image of width:300px, height:400px;

My container size is width:168px, height:208px;

I want to display only a part of the image so that it can fill the container.

like: Suppose top left corner is 0px 0px bottom right corner is 300px 400px of the original image. I want to display picture from 10px 0px(top-left) to 200px 208px(bottom-right) such that it fits in the container.

How to do this in css?

Hamza Zafeer
  • 2,360
  • 13
  • 30
  • 42
abhishek
  • 301
  • 2
  • 7
  • 18

3 Answers3

3

Use it as background image:

div {
  width: 168px;
  height: 208px;
  background: url("http://lorempixel.com/200/300/") no-repeat left -10px;
}
<div></div>

Make div overflow: hidden

div {
  width: 168px;
  height: 208px;
  overflow: hidden;
}
img {
  position: relative;
  top: -10px;
}
<div>
  <img src="http://lorempixel.com/200/300/" />
</div>
Justinas
  • 41,402
  • 5
  • 66
  • 96
  • I have a gallery of images each 300X400. i have to crop each image such that image is displayed as: 10px from left to 178px from left(horizontally) and 0px from top to 208px from top (vertically) – abhishek May 26 '16 at 12:59
  • @Abhishek Good for you... – Justinas May 26 '16 at 13:19
0

You can set overflow: hidden on the container if they are two separate elements. If you're setting the image with the background-image property give the background-size property a value of cover and the background-position a value of top center

EDIT:

With the new information from your comments in mind, what you should do it order your elements like this:

<div class="cut-image">
  <img class="image-to-cut">
</div>

Style them like so:

.cut-image {
  width: 168px;
  height: 208px;
  overflow: hidden;
  position: relative;
}

.image-to-cut {
  position: absolute;
  left: -10px;
  top: 0;
}
GMchris
  • 5,439
  • 4
  • 22
  • 40
  • no i am not using background property. how to do with img tag? and its a gallery of image.. how to apply common css to all? – abhishek May 26 '16 at 12:48
  • Just create a containing div and set it's width and height, then inside it place the `img` tag and set the containing div's `overflow` property to `hidden`. – GMchris May 26 '16 at 12:49
  • i want to crop the image such that image is displayed as: 10px from left to 178px from left(horizontally) and 0px from top to 208px from top (vertically) – abhishek May 26 '16 at 12:57
  • I've edited my post to reflect your comments. – GMchris May 26 '16 at 13:05
0

You can do this by using background: url(placeholder.img) x y no-repeat;. You need to replace x and y with values (px) from top-left. Additionally you need to set the div container to overflow: hidden;!

.gallery-image {
  background-position: 10px 0px;
  background-repeat: no-repeat;
}
<div class="gallery-image" style="background-image: url("placeholder.img");"></div>
Stephan Strate
  • 1,401
  • 1
  • 12
  • 15
  • its a gallery of images.. i have to set a common css property to all. how to do without background property? – abhishek May 26 '16 at 12:50
  • Do you have different values for x and y for each image? – Stephan Strate May 26 '16 at 12:54
  • all images are 300X400. i want to crop the image such that image is displayed as: 10px from left to 178px from left(horizontally) and 0px from top to 208px from top (vertically) – abhishek May 26 '16 at 12:57
  • I edited my post above. You can define one class or id with this settings and then change the image at the div container. – Stephan Strate May 26 '16 at 13:01