在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