在CSS中使用「clip：rect」時刪除圖片高度和寬度：HTML

我在html中使用clip：rect（）來重新調整大小圖片，但是當我調整圖片大小並檢查它時，它顯示其原始高度和寬度。我也描述了我想要做的事情。在CSS中使用「clip：rect」時刪除圖片高度和寬度：HTML

當屏幕寬度= 1024，然後充分圖像顯示
當屏幕寬度= 768，應僅顯示圖像的中心部分。
我想使用單個圖像來完成此操作。

我也粘貼該圖像的屏幕截圖。

圖像（畫面寬度= 1024）

enter image description here

圖像（畫面寬度= 768）旋轉768 * 1024

enter image description here

但是，當我檢查圖像@寬度= 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

來源

2013-05-11 Shivam Pandya

使用代碼將繼續顯示在檢查的方式。你最好的選擇是除了裁剪之外還要設置圖像的寬度/高度。

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

來源

2013-05-11 11:35:36 basarat

感謝，但我在哪裏可以得到的jQuery的參考？你可以在這裏發佈嗎？ – 2013-05-11 11:36:54

http://api.jquery.com/width/和http://api.jquery.com/height/ – basarat 2013-05-11 11:38:23

再次感謝，但我怎麼能合併我的CSS代碼與該jquery，因爲我是新來jquery和我不知道如何，如果你能在這裏粘貼這個工作代碼，我會接受這個答案。 – 2013-05-11 11:41:58

如果使用夾子和位置絕對的，最好的辦法是與負頂部和裁剪後留下價值重新定位的形象。

這裏描述你怎麼做： http://css-tricks.com/css-sprites-with-inline-images/

來源

2013-11-22 14:04:40 emik

在CSS中使用「clip：rect」時刪除圖片高度和寬度：HTML

回答

相關問題