0

1920x650の画像と、その左下に透明な水平の長方形があります。画像に合わせて拡大縮小することができました。問題は、幅をより多く失うような方法で拡大縮小する方法がわからないことです。imgに正確に比例します。

.container{
    position: relative;
    width: 100%;
    height: 100%;}

.bg-img{
    display:block;
    position: relative;
    width: 100%;
    height: 100%;
    z-index:1;}

.transblock{
    position:absolute; 
    width:44%; 
    height:6%; 
    top:90%; 
    left:0%; 
    z-index:5;}

http://jsfiddle.net/FA7XE/2/-全画面表示を開始し、ウィンドウを縮小します-ボックスとテキストが中央に移動しすぎます。（画像と完全に一致しますが、この場合は悪いことです:(）。下のメニューと比較して、画像を所定の位置に保持したいと思います。その方法について何かアイデアはありますか？ありがとうございます。

4

1 に答える 1

2

緑の長方形とテキストを表示するために使用されるコンテナは、縦方向の幅を使用します。CSSを見ると、親要素に固定幅が指定されていないことがわかります。これは、ブラウザが本体の幅の値を取得し、それを使用して寸法を計算することを意味します。

基本的に、「。transblock」divの幅は常に44％（本体の幅から取得）、「。h1text」divの幅は30％になります。

目的の効果を達成するための回避策は、JavaScript（jQuery）コードを少し使用して、要素の幅と位置を動的に計算することです。

jQuery('.transblock').width(jQuery('body').width() * 0.44);
jQuery('.h1text').width(jQuery('body').width() * 0.3);
jQuery('.h1text').css('left', jQuery('body').width() * 0.135);

あなたはこのフィドルを見ることができます

注：画像の幅と高さの使用方法に注意してください。設定幅：100％; と高さ：100％; 非正方形の画像では、不要なアスペクト比になる可能性があります。

.bg-img{
    width: 100%;
    height: 100%;
}

幅を指定するだけで十分です：100％-ブラウザは、画像の高さを強制せずに、比率を1：1に保ちながら、画像をコンテナに合わせます。

于 2013-01-22T09:26:34.813 に答える