3

画像のサイズを変更するためにhtmlでclip:rect()を使用しますが、画像のサイズを変更して検査すると、元の高さと幅が表示されます。やりたいことも書きました。

  • 画面幅=1024の場合、フル画像表示
  • 画面幅 = 768 の場合、画像の中央部分のみを表示する必要があります。
  • 単一の画像を使用してこれを行いたいです。

その画像のスクリーンショットも貼り付けます。

画像（画面幅＝1024）

ここに画像の説明を入力

画像 (画面幅 = 768)回転 768*1024

ここに画像の説明を入力

しかし、image @ 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 のコードを使用した後

ここに画像の説明を入力

4

2 に答える 2

1

クリップと絶対位置を使用する場合は、クリッピング後に上と左の値を負にして画像の位置を変更することをお勧めします。

これを行う方法について説明します： http://css-tricks.com/css-sprites-with-inline-images/

于 2013-11-22T14:04:40.993 に答える
0

検査時もそのまま表示されます。あなたの最善の策は、クリッピングに加えて画像の幅/高さを設定することです.

そのために 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-11T11:35:36.877 に答える