1

メイン ページの背景画像に写真を使用する Web ページをデザインしています。画像は、正しい縦横比を維持しながら、使用可能なウィンドウ サイズを可能な限りカバーする必要があります。

そのために、次の CSS を使用した「コンテナー」div があります。

div.background {
    background-image: url('/Content/Images/Home/main-bg.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;    
    float:left;
    width:100%;
}

これは完全に機能しています。

ただし、画像の特定の場所に追加の dom 要素を配置する必要があります。これも背景画像と同じようにスケーリングされます。

私は当初、JQuery を使用して「background-image-x」、「background-image-y」、「background-image-x」、「background-position-x」、および「background-position-y」CSS を読み取ると考えていました。プロパティを使用すると、追加の要素を配置するために必要な情報が得られる場合があります。

ただし、これらは必要な情報を返しません (たとえば、image-x と image-y は両方とも「50%」を返します)。

私が必要とするものを達成するための素敵でシンプルな（っぽい）方法はありますか...またはJavascriptと数学を使用して背景画像の位置とサイズを手動で設定する必要がありますか（したがって、必要な答えが得られます)?

私は数学が嫌いだ。私に使わせないでください:)

4

2 に答える 2

3

これは、コンテナの幅とコンテナの高さと比較した、画像の幅と画像の高さの非常に単純な比較比率で解決できます。画像が水平方向または垂直方向のどちらにスケーリングされるかを判断します。

img_ratio = img_width / img_height;
container_ratio = $(elm).width() / $(elm).height();

それに続いて、画像がスケーリングされたパーセンテージで計算できるので、オフセットを非常に簡単に計算できます。それを反対側の測定値に当てはめ、容器と比較します。

if(container_ratio > img_ratio){
    //centered x height 100%
        var scale_percent = $(elm).height() / img_height;
        var scaled_width = img_width * scale_percent;
        var x_offset = ($(elm).width() - scaled_width) / 2;
        offset = [x_offset, 0];
}else{
    //centered y width 100%
        var scale_percent = $(elm).width() / img_width;
        var scaled_height = img_height * scale_percent;
        var y_offset = ($(elm).height() - scaled_height) / 2;
        offset = [0, y_offset];
}

これをフィドルの例にまとめました: http://jsfiddle.net/y2LE4/

于 2013-01-29T17:46:49.040 に答える
0

お手伝いしたいと思います。

試してみてください：

$(document).ready(function(){

var something = background.offset();

 }

また

$(document).ready(function(){
      var something = $('.background').outerWidth(true);
}

または、幅機能のみ：http: //api.jquery.com/width/

于 2013-01-29T17:20:05.877 に答える