1

私はこれを調査しましたが、JavaScript ソリューションしか見つけられなかったので、CSS ソリューションが可能かどうかを誰かが知っているのだろうか...

コード スニペットを次に示します。

HTML

<div id="container">
        This is a small amount of text to appear over the stretched 
        background image, but I want to be able to see the entire image.
 </div>

CSS:

div#container 
{
        background: url('images/bigImage.png') no-repeat 0 0;
        background-size: 100%; /* makes the image stretch (vertically and horizontally) to the width of the device, so I've no idea what height the background image will be rendered at.*/
}

背景画像が div 全体を覆い、画像全体が表示されるように使用できる CSS はありますか?

前もって感謝します。

4

4 に答える 4

3

前に述べたように、CSS と background-image でこれを行うことはできません。また、background-size: cover は IE8 以下ではサポートされていません (コメントを読んで、縦横比を維持しながら流動的な (スケーラブルな) 画像が必要だと思いますか?)

その場合、通常の img 要素を使用してこれを実現できます。

<style type="text/css">
div#container {
    position    : absolute;
    top         : 0;
    left        : 0;
    overflow    : hidden;
    width       : 100%;
    height      : 100%;
}

div#container img {
    position : absolute;
    width    : 100%;
    top      : 0;
    z-index  : -1;
}
</style>

<div id="container">
    <img src="http://img.gawkerassets.com/img/18cxbtdr4fexmjpg/original.jpg">
    This is a small amount of text to appear over the stretched
    background image, but I want to be able to see the entire image.
</div>

編集- それがどのように機能するかを示すための jsfiddle があります: http://jsfiddle.net/Xfxar/

于 2013-02-25T18:17:30.077 に答える
2

div を画像サイズに引き伸ばしたい場合は、

背景サイズ:カバー;

画像をdivサイズにスケーリングする場合は、使用します

背景サイズ:含む;

于 2013-02-25T17:55:23.743 に答える
1

私の知る限り、CSS または JS で背景画像の高さを検出できないため、DIV をこの未知の高さにレンダリングすることはできません。

ただし、PHP を使用している場合は、次のように簡単です。

<?php
$myURL = "http://i.imgur.com/AiAeQyU.gif";
$myImage = getimagesize($myURL);
?>

<div 
style="
background: url('<?php echo $myURL; ?>') 0 0 no-repeat; 
width: <?php echo $myImage[0] . 'px'; ?>; 
height: <?php echo $myImage[1] . 'px'; ?>
">
<p>Your content</p>
</div>

それが役立つことを願っています。

于 2013-02-25T18:13:58.493 に答える
0

div で CSS ルール width:100% と height:100% を使用して、親 div の残りのスペースを占有することができます。デバイスのサイズに合わせて背景画像を拡大しようとしているようで、すでにこれを行っているようです。一般に、DIV をスペース全体に使用する場合は、CSS でパーセンテージを使用できます。この場合、背景画像の div をページの 100% に設定し、テキストの div を設定すると、ページ全体を背景で埋める必要があると思います。

于 2013-02-25T17:52:37.750 に答える