CODEWITHSUNDEEP
htmlcss
anthonypliu
anthonypliu

Reputation: 12437

If I have an image with a div wrapped around it, how do I make it only show a certain section of the image?

If I have an image with a div wrapped around it, how do I make it only show a certain section of the image?

<div id=#container"><img src="hello.jpg" /></div>

Lets say I want the image to only display a width of 200px and a height of 200px. I also want it to start showing it 10pixels from the top, and 30 pixels to the left.

Upvotes: 0

Views: 93

Answers (4)

Jeaf Gilbert
Jeaf Gilbert

Reputation: 11981

#container {
    padding-top  : 10px;
    padding-left : 30px;

}
#container img {
    width        : 200px;
    height       : 200px;
}

Image won't be stretched:

#container img {
    max-width    : 200px;
    max-height   : 200px;
}

Upvotes: 0

Pat
Pat

Reputation: 25675

If your <div id="#container"> is absolutely positioned, you can use the clip property:

#container {
    /* top, right, bottom and left points of the rectangle */
    clip: rect(10px, 230px, 210px, 30px);
}

The above would create a rectangular clip with its top-left corner 10px from the top and 30px from the left. Its bottom-right corner is 210px from the top and 230px from the left (which gives you your 200px of width and height).

You can read more about it in this article.

Upvotes: 1

MisterPhilip
MisterPhilip

Reputation: 2452

You could put it as a background-image for the div, make it a block with set width/height & use background-position to get the position you wanted.

Upvotes: 5

TheDeadMedic
TheDeadMedic

Reputation: 9997

#container {
    width: 200px;
    height: 200px;
    overflow: hidden
}
#container img {
    margin: -10px 0 0 -30px
}

Upvotes: 1

Related Questions