我有一个固定大小的< div>具有一些复杂的内容(包括文本和背景图像).这< div>它的大小以像素为单位(并且其内容取决于此大小,内容位置也以像素为单位进行硬编码).
这是一个非常简单的例子：http://jsfiddle.net/dg3kj/.
我需要把div和它的内容进行缩放,保持其长宽比,所以它适合窗口.
一个解决方案,不需要我手动更改< div>内容是优选的(它是动态生成的,是一堆非常混乱的遗留代码,我想避免触摸). JavaScript(jQuery)解决方案是可行的(包括改变生成内容的解决方案 – 只要它是在生成本身后完成的).
我试图用变换：scale(),但是没有产生令人满意的结果.参见这里：http://jsfiddle.net/sJkLn/1/.(我希望红色背景不可见 – 即最外面的< div>大小不应该按照缩小的< div>的原始尺寸拉伸.)
任何线索？
解决方法
我不完全确定这是否满足您的需求,但如果不符合您的需求,也许会刺激其他想法.
这里我使用transition：scale()来管理需要按比例缩放的div的大小.变换起点设置在左上角,以保持div在左上角.
当div需要缩放时,它的包装div也是大小的.这应该允许页面上的其他内容正确浏览器调整大小.如果包装div不存在,您可以使用$.wrap()动态添加一个,尽管它可能会“有趣”地计算出要转移哪些样式,以保持整体布局平稳运行.
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;
}
码：
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 });
});