缩放div其内容适合窗口 [英] Scale div with its content to fit window

问题描述

我有一个固定大小的< div> 有一些复杂的内容（包括文本和背景图片）。这个< div> 的大小以像素为单位硬编码（其内容取决于此大小，内容位置也以像素为单位进行硬编码）。

以下是一个大大简化的示例： http://jsfiddle.net/dg3kj/ 。 p>

我需要缩放div和其中的内容，保持其宽高比，因此它适合窗口。

不需要我手动更改< div> 内容的解决方案并且是一堆非常杂乱的遗产代码，我想避免接触）。 JavaScript（jQuery）解决方案是可以的（包括更改生成的内容 - 只要它是完成事后生成本身）。

我试图玩 transform：scale（），但没有产生令人满意的结果。请参阅： http://jsfiddle.net/sJkLn/1/ 。 （我期望红色背景不可见 - 即最外层< div> 尺寸不应该被缩小的原始尺寸 code>< div> 。）

任何线索？

解决方案

我不完全确定这是否满足您的需求，但也许会刺激一些其他想法，如果没有。

我使用 transition：scale（）来管理需要按比例缩放的div的大小。 transform-origin 设置为左上角以保持div拥抱左上角。

当div需要缩放时，其包装div的大小也一样。这应该允许页面上的其他内容在浏览器调整大小时正确流动。如果wrap不存在，你可以使用 $。wrap（）动态添加一个，尽管它可能会让你感兴趣。

Demo Fiddle 演示内容

CSS：

  #wrap {
 position：relative; 
 width：640px; 
 height：480px; 
 background-color：red; 
} 
 #outer {
 position：relative; 
 width：640px; 
 height：480px; 
 background：url（'http://placekitten.com/640/480'）no-repeat center center; 
 -webkit-transform-origin：top left; 
} 
  

代码：

  var maxWidth = $（'＃outer'）。width（）; 
 var maxHeight = $（'＃outer'）。height（）; 
 
 $（window）.resize（function（evt）{
 var $ window = $（window）; 
 var width = $ window.width（）; 
 var height = $ window.height（）; 
 var scale; 
 
 // early exit 
 if（width> = maxWidth& height> = maxHeight ）{
 $（'＃outer'）。css（{' -  webkit-transform'：''}）; 
 $（'＃wrap'）。css（{width：''，height ：''}）; 
 return; 
} 
 
 scale = Math.min（width / maxWidth，height / maxHeight）; 
 
 $ '#o​​uter'）。css（{' -  webkit-transform'：'scale（'+ scale +'）'}）; 
 $（'＃wrap'）。css（{width：maxWidth * height：maxHeight * scale}）; 
}）; 
  

I have a fixed-size <div> with some complex content (including text and background images). This <div> has its size hardcoded in pixels (and its content depends on this size, and content positions are hardcoded in pixels as well).

Here is a greatly simplified example: http://jsfiddle.net/dg3kj/.

I need to scale that div and the content inside it, maintaining its aspect ratio, so it fits the window.

A solution that would not require me to manually change <div> contents is preferable (it is generated dynamically and is a bunch of very messy legacy code which I would like to avoid touching). JavaScript (jQuery) solutions are OK (including ones that change the generated content — as long as it is done post-factum of generation itself).

I tried to play with transform: scale(), but it did not yield satisfactory results. See here: http://jsfiddle.net/sJkLn/1/. (I expect the red background to be not visible — i.e. outermost <div> size should not be stretched by the original dimensions of scaled down <div>.)

Any clues?

解决方案

I'm not entirely sure if this meets your needs, but perhaps it will spur some other ideas if not.

Here I'm using transition: scale() to manage the size of the div that needs to be proportionally scaled. transform-origin is set to top left to keep the div hugging the top left corner.

When the div requires scaling, its wrapping div is sized as well. This should allow other content on the page to flow correctly as the browser is resized. If the wrapping div doesn't exist, you can add one dynamically using $.wrap() though it may get 'interesting' figuring out which styles to transfer over to keep the overall layout working smoothly.

Demo Fiddle Demo with content

CSS:

#wrap {
    position: relative;
    width: 640px;
    height: 480px;
    background-color: red;
}
#outer {
    position: relative;
    width: 640px;
    height: 480px;
    background: url('http://placekitten.com/640/480') no-repeat center center;
    -webkit-transform-origin: top left;
}

Code:

var maxWidth  = $('#outer').width();
var maxHeight = $('#outer').height();

$(window).resize(function(evt) {
    var $window = $(window);
    var width = $window.width();
    var height = $window.height();
    var scale;

    // early exit
    if(width >= maxWidth && height >= maxHeight) {
        $('#outer').css({'-webkit-transform': ''});
        $('#wrap').css({ width: '', height: '' });
        return;
    }

    scale = Math.min(width/maxWidth, height/maxHeight);

    $('#outer').css({'-webkit-transform': 'scale(' + scale + ')'});
    $('#wrap').css({ width: maxWidth * scale, height: maxHeight * scale });
});

这篇关于缩放div其内容适合窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！