CODEWITHSUNDEEP
htmlcss
Shivam Pandya
Shivam Pandya

Reputation: 1061

Remove Image Height and width, when use "clip:rect" in CSS : HTML

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.

I also paste screenshots of that image.

Image (screen width = 1024)

enter image description here

Image (screen width = 768) Rotate 768*1024

enter image description here

But when I inspect image @ width = 768, its show its original height and width like that

enter image description here

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

enter image description here

Upvotes: 4

Views: 1906

Answers (2)

emik
emik

Reputation: 953

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/

Upvotes: 1

basarat
basarat

Reputation: 276095

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);
    }
}

Upvotes: 0

Related Questions