Question

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

当屏幕宽度= 1024时，则显示完整图像
当屏幕宽度= 768时，只显示图像的中心部分。
我想用单张图片完成此操作。

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

图片（网页宽度= 1024）

enter image description here

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

enter image description here

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

enter image description here

因此我无法完美地放置其他代码。

这是我的代码。

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的代码

enter image description here

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

删除图像高度和宽度，使用时＆＃34; clip：rect＆＃34;在CSS中：HTML

2 个答案: