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

Question

我在html中使用clip：rect（）来重新调整大小的图像，但是当我调整图像大小并检查它时，它显示其原始高度和宽度。 我还描述了我想做的事情。

当屏幕宽度= 1024时，则显示完整图像
当屏幕宽度= 768时，只显示图像的中心部分。
我想用单张图片做到这一点。

我还会粘贴该图片的屏幕截图。

图像（屏幕宽度= 1024）

在此输入图像描述

图像（屏幕宽度= 768）旋转768 * 1024

在此输入图像描述

但是当我检查图像@ width = 768时，它会显示它的原始高度和宽度

在此输入图像描述

所以我无法完美地放置我的其他代码。

这是我的代码。

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>

使用@BASarat代码后

在此输入图像描述

Answer 1

如果您使用剪辑和位置绝对，最好的方法是在裁剪后重新定位具有负顶部和左侧值的图像。

下面介绍了如何操作： http ： //css-tricks.com/css-sprites-with-inline-images/

Answer 2

它将继续以检查方式显示。 最好的办法是设置图像宽度/高度以及剪裁。

您可以使用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