31

<div>いくつかの複雑なコンテンツ (テキストと背景画像を含む) を含む固定サイズがあります。これ<div>には、サイズがピクセル単位でハードコードされています (コンテンツはこのサイズに依存し、コンテンツの位置もピクセル単位でハードコードされています)。

これは非常に単純化された例です: http://jsfiddle.net/dg3kj/。

ウィンドウに収まるように、その縦横比を維持しながら、その div とその中のコンテンツをスケーリングする必要があります。

コンテンツを手動で変更する必要のないソリューション<div>が望ましいです (動的に生成され、触れたくない非常に厄介なレガシー コードの集まりです)。JavaScript (jQuery) ソリューションは問題ありません (生成されたコンテンツを変更するものを含みます — 生成自体の事後に行われる限り)。

で遊んでみましたtransform: scale()が、満足のいく結果は得られませんでした。ここを参照してください: http://jsfiddle.net/sJkLn/1/。(赤い背景が表示されないことを期待しています。つまり、最も外側のサイズは、縮小された元の<div>寸法によって引き伸ばされるべきではありません。)<div>

手がかりはありますか？

4

6 に答える 6

5

dc5 からの回答を取得し、ウィンドウに基づいてスケールを設定できる小さな関数に入れました。

function scaleBasedOnWindow(elm, scale=1, fit=false){
    if(!fit){
        elm.style.transform='scale('+scale/Math.min(elm.clientWidth/window.innerWidth,elm.clientHeight/window.innerHeight)+')';
    }else{
        elm.style.transform='scale('+scale/Math.max(elm.clientWidth/window.innerWidth,elm.clientHeight/window.innerHeight)+')';
    }
}

要素をフィットさせて切り取らないようにする場合は、 に変更Math.minするMath.maxか、この関数の fit パラメータを true に設定します。

縮小版:

function scaleBasedOnWindow(elm,scale=1,fit){if(!fit){elm.style.transform='scale('+scale/Math.min(elm.clientWidth/window.innerWidth,elm.clientHeight/window.innerHeight)+')';}else{elm.style.transform='scale('+scale/Math.max(elm.clientWidth/window.innerWidth,elm.clientHeight/window.innerHeight)+')';}}
于 2019-10-20T00:05:25.413 に答える
-2

コンテンツのサイズを % ベースにする限り、外側の div に基づいて動的にサイズを変更できます。次に、jQuery を使用します。

jQuery(document).ready(function ($) {
    var newWidth = '300px';
    $('.your-div').css('width', newWidth);
});
于 2013-09-11T20:58:52.300 に答える