リサイズ内で画像を中央に配置して拡大/縮小する方法DIV

ブラウザウィンドウに応じてサイズが変わるDIVがあります。私はその中にイメージを持っていて、実質的にブラウザウィンドウ全体をいっぱいにしてしまいます。ウィンドウが広すぎたり長すぎたりすると、比例して伸びることなくサイズを変更する必要があります。リサイズ内で画像を中央に配置して拡大/縮小する方法DIV

さらに私はそれがブラウザウィンドウには大きすぎるなったときに、イメージの「スイートスポット」を参照して中心の画像を持っている必要があります。

私は年齢を探していて、いろいろなことを試みてきましたが、私の人生のためにはそれを解決することはできません。おそらくそれはJavascriptやjQueryで解決できますか？

これは私がこれまでにDIV IDとIMAGEクラスの持っているCSSです：それはスケールアップおよびダウン

#VisitUsSlides { 
    height:100%; 
    width:100%; 
    position:absolute; 
    top:0px; 
    left: 0px; 
} 

.resizingImage { 
    width:100%; 
    min-width:100px; 
    min-height:100%; 
    position:fixed; 
    top:0; 
    left:0; 
}

が、ウィンドウが薄いになったときに水平に「スカッシュ」に始まり、それがにISNセンタリング。 div要素を想定し

出典

2012-01-17 Mr.2

たぶん、あなたのページのJSFiddleを作るので、我々はで動作するように何かを持っている：http://jsfiddle.net/ – Teak

が、これはあなたの問題を解決希望それを試す

<html> 
<head> 
<style type="text/css"> 
div 
{ 
width:100%; 
height:100%; 
background-image:url('sample.jpg'); 
background-repeat:no-repeat; 
background-attachment:fixed;//**Edit: Add this and check** 
background-size:cover; //Edit2: Add this and check 
background-position:center; 
} 
</style> 
</head> 

<body> 
<div> 
</div> 
</body> 
</html>

を与えます。

出典

2012-01-17 04:59:18 AmGates

うまくいきませんでした –

ちょっと編集してチェックしてください – AmGates

今は中心になっていますが、ウィンドウのサイズが変更されていません –

はリサイズのdivながらも

を助け imageholder

#imageholder{width:500px;height:500px;position:relative;} 
#imageholder>img{width:90%;height:90%;position:absolute;z-index:10;top:5%;left:5%;}

希望という名前のIDを持っています。イメージの最大高さと最大幅を元の寸法に設定します。

出典

2012-01-17 03:38:47 dip1232001

それは申し訳ありませんが、まったく機能しませんでした。 DIVはサイズが変更されるので、固定幅または高さを持つことはできません。 –

divを任意のjavascript.andでサイズ変更しようとすると、画像のサイズが$（ '＃somebuttonclick'）のように大きすぎます。click（function（）＃$ imageholder）css（{width：900、高さ：900}）}）;ちょうど次のような関数を作る関数resizeDiv（divWidth、divHeight）{$（＃imageholder）.css（{width：divWidth、height：divHeight}）} – dip1232001

また、幅。 – dip1232001

img { 

     margin : 0 auto; 
     display:block; 
}

試してみてください。

必要に応じてdivを配置します。

出典

2012-01-17 04:49:11

いいえ、動作しませんでした。： –

はこのJavaScriptを試してみてください：

http://jsfiddle.net/Teak/6yxcG/

私はそれはあなたが探して何か分からないが、良いことが、編集さ/拡張することができます。私はそれがあなたの後に何であるか完全にはっきりしていません。

編集：http://www.teaksoftware.com/html/

出典

2012-01-17 06:13:17 Teak

はCSS3プロパティがありますが、私はそれを持っているサポートについてはよく分からない：このページ全体のバージョンをお試しください。

.resizingImage { 
height: 100%; 
width: 100%; 
object-fit: contain; /*OR*/ 
object-fit: fill; /*there's also an object-position property*/ 
}

これにより、画像が伸びないようにします。
これは、CSSの1行だけだとすれば、試してみることができます。

出典

2012-02-29 17:10:39 Maroshii

リサイズ内で画像を中央に配置して拡大/縮小する方法DIV

答えて

関連する問題