在CSS：HTML中使用“clip：rect”时删除图像高度和宽度

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. 我在html中使用clip：rect（）来重新调整大小的图像，但是当我调整图像大小并检查它时，它显示其原始高度和宽度。 I also described what i want to do. 我还描述了我想做的事情。

when screen width = 1024, then full image display 当屏幕宽度= 1024时，则显示完整图像
when screen width = 768, only center part of image should be displayed. 当屏幕宽度= 768时，只显示图像的中心部分。
I want to done this using single image. 我想用单张图片做到这一点。

I also paste screenshots of that image. 我还会粘贴该图片的屏幕截图。

Image (screen width = 1024) 图像（屏幕宽度= 1024）

在此输入图像描述

Image (screen width = 768) Rotate 768*1024 图像（屏幕宽度= 768）旋转768 * 1024

在此输入图像描述

But when I inspect image @ width = 768, its show its original height and width like that 但是当我检查图像@ width = 768时，它会显示它的原始高度和宽度

在此输入图像描述

so that i'm unable to place my other code perfectly. 所以我无法完美地放置我的其他代码。

Here Is My Code. 这是我的代码。

HTML 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 使用@BASarat代码后

在此输入图像描述

Answer 1

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/ 下面介绍了如何操作： http ： //css-tricks.com/css-sprites-with-inline-images/

Answer 2

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: 您可以使用jquery或直接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);
    }
}

在CSS：HTML中使用“clip：rect”时删除图像高度和宽度

问题描述

2 个解决方案

解决方案1
1 2013-11-22 14:04:40

解决方案2
0 2013-05-11 11:35:36

在CSS：HTML中使用“clip：rect”时删除图像高度和宽度

问题描述

2 个解决方案

解决方案1 1 2013-11-22 14:04:40

解决方案2 0 2013-05-11 11:35:36

解决方案1
1 2013-11-22 14:04:40

解决方案2
0 2013-05-11 11:35:36