0

既存のサイトを RWD に変換する作業を行っていますが、ヘッダー イメージに苦労しています。このチュートリアルに従う (特に www にある) http://alistapart.com/article/fluid-images

480px 未満にスケーリングすると、この (または任意の) ページのヘッダー画像が適切に応答しません http://www.your-adrenaline-fix.com/dirt-bikes-for-sale.html

私が考えたり読んだりできることはすべて試しましたが、ダーニングされた画像は正しく表示されません。

私が欠けているものを誰かが私と共有することを気にしないなら、私は最も感謝しています.

以下は、メインの css ファイルと、ページが 480px 未満に縮小されたときにメディア クエリで呼び出される mobile.css ファイル全体のスニペットです。

img {max-width:100%}

    #PageWrapper{ 
    width:960px;
    border:5px groove #DDDDDD;
    margin:15px auto;
    background-image:url(../image-files/background.gif);
    background-repeat:repeat-y;
    background-color:transparent;
}

#Header {
    color:#ffffff;
    position:relative;
    height:118px;
    background-image:url(../image-files/motocross-ruts.jpg);
    background-repeat:no-repeat;
    background-position:top left;   
}

#Header a.header-home-link{width:960px;height:118px;display:block;}

#ContentWrapper{float:left;width:100%;}

#ContentColumn{margin:0 180px;}

#NavColumn{float:left;width:179px;margin-left:-965px;}

#ExtraColumn{float:left;width:179px;margin-left:-180px;}

#Footer{clear:both;width:100%;padding:8px 0;height:180px;border-top:3px groove #656565;}

#Footer .Liner{margin:20px;padding:0;}

The following is the mobile.css file

    body {font-size:80%;}

.Liner{padding:2px;}

#PageWrapper{max-width:480px; margin:10px;}

#Header {min-height:39px;}

#Header a.header-home-link{display:none;}

#NavColumn{display:none;}

#ExtraColumn{display:none;}

#ContentWrapper{max-width:100%;background-image:url(../image-files/mobile320-background.gif);background-repeat:repeat-y;}

#ContentColumn{max-width:100%; margin:0;}

#ExtraNavTop {display:none;}

.Navigation{display:none;}

.mostPopular {display:none;}

私はこれら 2 つのファイルを 1 日中変更しており、さまざまな構成を数多く見てきました。適切にスケーリングされた画像になる、私が望むものではありません。このようにして、この RWD 変換に関連する To-Do の増え続けるリストに進むことができます。

スチュアート・K

4

2 に答える 2

0

CSS #Header を見てください。ヘッダー画像は背景です!!! ヘッダー ブロックには が含まれていません<img>。スケーリングするものはありません。代わりにCSS3 ルールを試すbackground-sizeか、ヘッダー ブロックに挿入してください<img>。 サイトの CSS http://www.your-adrenaline-fix.com/dirt-bikes-for-sale.html :

#Header {
    // Here it is!!!
    background-image: url("../image-files/motocross-ruts.jpg");
    background-position: left top;
    background-repeat: no-repeat;
    color: #FFFFFF;
    height: 118px;
    position: relative;
}
于 2013-09-20T22:08:56.277 に答える