div内の背景画像を縮尺する

ウェブページの背景画像を拡大するためのプラグインがいくつかあることは知っていますが、これは少し異なります。div内の背景画像を縮尺する

私は比例的にサイズを変更するためにdivを取得しようとしていますし、内部の背景画像も比例してサイズ変更しています。これは、水平方向のサイズ変更を行います。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title></title> 
<style type="text/css" media="screen"> 

    body { 
    background: #000; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    } 
    #bg 
    { 
    z-index: -1; 
    position: absolute; 
    top:0; 
    left:0; 
    } 

    #wrap 
    { 
    position: relative; 
    margin: 0 auto; 
    } 
</style> 

</head> 
<body> 

<div id="wrap"> 
    <img src="bg.jpg" id="bg" width="100%" /> 


    hi 
</div> 
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> 

</script> 
<script type="text/javascript" charset="utf-8"> 

    var minWidth = 400; 
    var minHeight = 400; 
    var maxWidth = 500; 
    var maxHeight = 500; 

    function resize() { 
    var windowWidth = $(window).width(); 
    var windowHeight = $(window).height(); 

    var w = windowWidth < minWidth ? minWidth : 
    windowWidth > minWidth && windowWidth < maxWidth ? windowWidth : 
    windowWidth > maxWidth ? maxWidth : 
    minWidth; 

    var h = windowHeight < minHeight ? minHeight : 
    windowHeight > minHeight && windowHeight < maxHeight ? windowHeight : 
    windowHeight > maxHeight ? maxHeight : 
    minHeight; 

    $("#wrap").css({ 
    'width': w + 'px', 
    'height': h + 'px' 
    }); 





    } 

    $(document).ready(function() { 

    resize(); 
     $(window).resize(function() { 
     resize(); 
     }); 
    }); 


</script> 


</body> 
</html>

出典

2011-01-24 html

例の画像は背景画像ではなく、通常のIMG要素です。背景画像はCSS画像になります。 –

イメージが含まれている（正しく動作している）divを伸ばしています。しかし、画像にはパーセンテージの高さが与えられていないため、親DIVのサイズを変更するときに影響を受けません。代わりに、あなたは普通の<img>タグを使用し、絶対位置を使用して背景をエミュレートすることができ、実際の背景を使用しての

出典

2011-01-24 14:31:21 acme

次元が1つしか配置されていない場合は、画像を比例して拡大/縮小します。寸法を変更するフラグがありましたが、jQueryは寸法を100％（幅または高さ）に設定しませんでした。 – html

ああ、私はあなたに誤解しました - 私はあなたの例を試してみました。あなたの問題が何であるかは、はっきりしていません。元の投稿を編集して例を追加することもできます。 – acme

ええ、私もそれを垂直にしようとしています。 – html

..コンセプトの証明：http://jsfiddle.net/yahavbr/vu4Zh/

HTMLコード：

<div id="ImageContainer"> 
    <img class="background" src="mybackground.gif" border="0" /> 
    <div class="contents"> 
     Hello World 
    </div> 
</div>

CSS：

#ImageContainer { width: 300px; position: relative; } 
#ImageContainer .background { width: 100%; position: absolute; left: 0px; top: 0px; z-index: 1; } 
#ImageContainer .contents { position: absolute; left: 0px; top: 0px; z-index: 99; }

このようにすると、画像は自動的にコンテナに拡大され、スクリプトは含まれません。

出典

2011-01-24 14:42:26

ありがとう。私は私の意図を明確にしているかどうかはわかりません。コンテナの最小幅と最大幅と高さがなければなりません。 – html

@htm最小値と最大値の意味は？誰がその価値観をどこで定義していますか？どのように適用する必要がありますか？ –

div内の背景画像を縮尺する

答えて

関連する問題