CSS流体イメージの交換？

Question

CSSを使用してテキストをイメージに置き換えることはよく知られた方法です。 CSS-Tricksにはいくつかのテクニックの博物館があります（http://css-tricks.com/examples/ImageReplacement/）。

しかし、流体イメージ（流体ページレイアウトの100％にまたがるロゴなど）で置き換えることはできません。流体イメージの交換を行うためにCSSを使用することは可能ですか？

ほとんどすべての画像置換技術は、背景画像を使用します。そして、私はあなたがbackground-size: 100%を設定できることを知っています。しかし、ブラウザがコンテンツの一部としてバックグラウンドイメージを考慮しないため、テキスト要素の高さを幅で拡大するのは簡単ではありません。

一般的な画像置換技術のいずれかをメディアクエリと簡単に組み合わせて、テキスト要素のサイズを特定の高さx幅の比に徐々に変更できることを理解します。しかしそれは増分であり、流動的ではありません。

私はこれについて説明するブログ記事を見つけました（http://viljamis.com/blog/2011/fluid-image-replacement.php）。しかし、実際にはHTMLコンテンツにイメージを置くことが必要です。私は実際のテキストの置換を探しています。背景画像が含まれているのdivで

Answer 1

は、いくつかのあいを取ったが、私は方法を考え出しました。コンテナの高さにリンクされているheightと異なり、padding-topとpadding-bottomのパーセンテージがコンテナの幅にリンクされているため、キーはパディングパーセンテージを使用して高さを設定することです。

HTML

<h1 class="logo">The Logo</h1> 

CSS padding-topは幅によって画像の高さを割ることによって計算される

h1.logo { 
    background-image: url('logo.png'); 
    background-size: 100%; 
    width: 100%; 
    padding-top: 29.8%; 
    height: 0; 
    text-indent: -9999px; 
} 

。

の作業例：http://jsfiddle.net/bXtRw/

私はoverflow: hidden代わりのtext-indent: -9999pxを使用しても動作する必要があることに注意しましょう。しかし、私はFirefoxで不安定な動作をします。

また、height: 0の代わりにfont-size: 0を使用すると、Firefoxで動作が不安定になります。

Answer 2

：

div { 
    max-width: 100%; 
    width: 100%; 
    min-height: 300px; //Adjust this number accordingly 
    height: auto; 
} 

Answer 3

私は@Warren Whippleと同じ方法を使用しますが、通常はcompass/sassを使用します。あなたはバニラのCSSを使用することに限定されていない場合は、この方法がうまく抽象化していくつかの作品は：

// Only works in Compass/Sass – not regular CSS! 
h1.logo { 

    $header-logo-image: "logo.png"; 

    background: image-url($header-logo-image) no-repeat; 
    background-size: 100%; 
    height: 0; 
    padding-top: percentage(image-height($header-logo-image)/image-width($header-logo-image)); 
    overflow: hidden; 
    width: 100%; 
} 

あなたは自分のイメージの名前で$header-logo-image変数を交換する必要があります。

---

加えて、私は時々追加：max-width: image-width($header-logo-image);、その背景画像より任意で拡大大きさからh1を妨げるであろう。