web-dev-qa-db-ja.com

CSSを使用してブラウザのサイズに合わせて画像のサイズを自動的に変更する

ブラウザウィンドウのサイズを変更したときに、すべての（または一部の）画像のサイズが自動的に変更されるようにします。私は以下のコードを見つけました - それは何もしません。

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要素を正確に同じ位置（％wise）に配置し、サイズも変更することができます（coverが背景の場合）。

cssresizeresponsive-design
58
sigug

画像を柔軟にするには、単にmax-width:100%とheight:autoを追加します。 Image max-width:100%とheight:autoはIE7では動作しますが、IE8では動作しません（そう、変なIEバグ）。これを修正するには、IE8用にwidth:auto\9を追加する必要があります。

ソース： http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

例えば ​​：

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

そして、imgタグを使用して単純に追加した画像は、柔軟になります

JSFiddleの例はこちら JavaScriptは必要ありません。最新バージョンのChrome、Firefox、およびIE（これまでにテストしたものすべて）で動作します。

136
Curtis Crewe

画像コンテナ

上記のトリックを使用した画像の拡大縮小は、画像のコンテナのサイズが変更された場合にのみ機能します。

#iconsコンテナは、幅と高さにpxの値を使用します。ブラウザのサイズを変更しても、pxの値は変わりません。

解決策

次のいずれかの方法を使用してください。

  1. %値を使って幅と高さを定義します。
  2. 現在のスクリーンサイズに基づいて幅と高さを異なる値に設定するには、一連の@mediaクエリを使用します。
3
Matt Coughlin

これはあまりにも単純な答え（私はまだここではまだ新しい）ですが、この状況を改善するために過去に行ったことは、画面に表示したい画面のパーセンテージを考え出すことです。たとえば、私が取り組んでいるWebページの1つに、ロゴが見栄えよくするために画面サイズの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にクラスタグオプションを使用する（必要に応じてクラスタグを作成する）こともできますが、最終的には多くの作業が必要になります。しかし、サイトがそれを要求するならば：サイトはそれを要求します。

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

1
Chad

以下は、違法であるにもかかわらず、私の200の数字に対して、あらゆる幅のパーセンテージについて、すべてのブラウザで動作します。 Jukkaは「とにかくそれを使う」と言った。 （このクラスは、画像を左右にフロートさせて余白を設定するだけです。）これが標準的な方法ではない理由は想像できません。

<img class="fl" width="66%"
src="A-Images/0.5_Saltation.jpg"
alt="Schematic models of chromosomes ..." />

ウィンドウの幅を変更すると、画像は絶対に拡大または縮小されます。

0
Ferren