Remove Image Height and width, when use “clip:rect” in CSS : HTML
Question
I use clip:rect() in html for re-size image, but when I resize image and Inspect it, its Show its Original Height and width. I also described what i want to do.
- when screen width = 1024, then full image display
- when screen width = 768, only center part of image should be displayed.
- I want to done this using single image.
I also paste screenshots of that image.
Image (screen width = 1024)
Image (screen width = 768) Rotate 768*1024
But when I inspect image @ width = 768, its show its original height and width like that
so that i'm unable to place my other code perfectly.
Here Is My Code.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
@media screen and (max-width: 1024px){
img
{
position:absolute;
clip:rect(0px,600px,450px,0px);
}
}
@media screen and (max-width: 768px){
img
{
position:absolute;
clip:rect(80px,400px,400px,190px);
}
}
</style>
</head>
<body>
<img src="sunset-splash-canada_63712_600x450.jpg"/>
</body>
</html>
After use code from @BASarat
2 answers
solution1
1 2013-11-22 14:04:40
If you use clip and position absolute, your best bet is to reposition the image with negative top and left values after clipping.
Here is described how you do it: http://css-tricks.com/css-sprites-with-inline-images/
solution2
0 2013-05-11 11:35:36
It will continue to display that way on inspection. Your best bet is to set the image width / height in addition to the clipping.
You can use jquery for that or straight up css:
@media screen and (max-width: 1024px){
img
{
position:absolute;
width: 600px; /* what ever height / width you want */
height:450px;
clip:rect(0px,600px,450px,0px);
}
}
@media screen and (max-width: 768px){
img
{
position:absolute;
width: 320px; /* what ever height / width you want */
height: 210px;
clip:rect(80px,400px,400px,190px);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.