70

ブラウザー ウィンドウのサイズを変更すると、すべての (または一部の) 画像が自動的にサイズ変更されます。次のコードを見つけましたが、何もしません。

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="icons">
            <div id="contact">
                <img src="img/icon_contact.png" alt="" />
            </div>
            <img src="img/icon_links.png" alt="" />
        </div>
    </body>
</html>

CSS

body {
    font-family: Arial;
    font-size: 11px;
    color: #ffffff;
    background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
    background-size: cover;
}

#icons {
    position: absolute;
    bottom: 22%;
    right: 8%;
    width: 400px;
    height: 80px;
    z-index: 8;
    transform: rotate(-57deg); 
    -ms-transform: rotate(-57deg); 
    -webkit-transform: rotate(-57deg); 
    -moz-transform: rotate(-57deg);
}

#contact { 
    float: left; 
    cursor: pointer; 
}


img { 
    max-width: 100%; 
    height: auto; 
}

background-size: cover基本的にフルスクリーンのデザイン (を使用) をdiv使用し、ブラウザー ウィンドウのサイズを変更するときに要素をまったく同じ位置 (% 賢明) に配置するにはどうすればよいcoverですか?

4

4 に答える 4

1

これは答えが単純すぎるかもしれません（私はまだここにいるのは初めてです）が、この状況を改善するために過去に行ったことは、画像が占める画面の割合を計算することです. たとえば、私が取り組んでいる 1 つの Web ページでは、ロゴが画面サイズの 30% を占める必要があります。私は遊んで、最終的にこのコードを試しましたが、これまでのところうまくいきました:

img {
width:30%;
height:auto;
}

そうは言っても、これにより、すべての画像が常に画面サイズの 30% に変更されます。この問題を回避するには、これをクラスにして、30% にしたい画像に直接適用します。前述のサイトでこれを達成するために私が書いたコードの例を次に示します。

CSS 部分:

.logo {
position:absolute;
right:25%;
top:0px;
width:30%;
height:auto;
}

HTML 部分:

<img src="logo_001_002.png" class="logo">

または、自動的にサイズを変更したい画像を独自の div に配置し、各 div でクラス タグ オプションを使用することもできます (必要に応じてクラス タグを作成します)。しかし、サイトがそれを要求する場合: サイトはそれを要求します。

うまくいけば、これが役に立ちます。すてきな一日を！

于 2015-11-15T14:26:25.730 に答える