|
How to make a photo show only the center part, hide the around part.
Hello friends, still me, have some question.
I want to show a photo in my page, the DIV layer is 500 * 500px. I will replace the picture very often , the picture size is not sure, may be horizontal version may be vertical version, maybe 800*600px maybe 576*720px. I don't want to get the photo deformation. How to set CSS or JS, make the photo show only the center 500 * 500 px, hide the around part. Thanks.
3 Answers
Use a background image on a DIV with pre-defined dimensions, and set the image position to 50%, which essentially centers it. Whatever overflows the 500x500 will be cropped...
#yourImageDiv {
background: url(../img/image.jpg) no-repeat 50%;
height: 500px;
width: 500px;
}
Posted: Go 1 of 1 people found this answer helpful. Did you? Yes No
One nice trick is to use a transparent PNG instead of a div and apply a background-image style to it. That way you get to use the image as you normally would (inline, etc.) but can crop at will.
#cropper {
width: 500px;
height: 500px;
background-image: url(myBackgroundImage.png);
background-repeat: no-repeat;
background-position: center center;
}
and<img id="cropper" src="clear.png"> Posted: Gamal 1 of 1 people found this answer helpful. Did you? Yes No
there is many ways, you can make it as a div background or you can use the CSS clip Property as:
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
</style>
</head>
<body>
<img src="img.gif" width="100" height="140" />
</body>
</html>
Posted: MacOS 1 of 1 people found this answer helpful. Did you? Yes No |
'youlichika' Status
Questions : 15
Answers : 8 Comments : 16 |
FOLLOW AWCORE
- Follow Us:
© Advanced Web Core. All rights reserved
Thanks, friends. I'm so lack of imagination. Use a picture as a background image on this DIV is a good method.
September 21, 2011