这个问题给了我一个噩梦,正在拖延一个项目。我有一个480px by 280px
的div,它有绝对定位的元素。文字,不同大小的图像。我想缩小div以适应移动设备300px by 180px
。我尝试过css媒体查询,但字体大小,元素位置和图像尺寸保持不变,只有画布改变大小。
我的代码:
$(document).ready(function()
{
$('#btn').click(function()
{
var div=$('#bigcard').html();
$('#smallcard').html(div);
}
);
});
}
#bigcard
{
width:500px;
height:300px;
border-width:2px;
border-color:black;
border:1px solid black;
background:orange;
}
#smallcard
{
width:200px;
height:130px;
background:pink;
border:1px solid black;
}
Big Div
<div id="bigcard">
<span style="position:absolute;font-size:15px;color:green;font-family:fantacy:margin-top:20px;margin-left:40px;">Some user generated text</span>
<span style="font-size:35px;color:black;font-family:tahoma;margin-top:200px;margin-left:90px;font-weight:bold;position:absolute;">Foo Foo</span>
<img src="http://www.clker.com/cliparts/Y/f/v/m/p/3/flying-bird-md.png" id="image1" style="margin-top:50px;margin-left:100px;width:80px;"/>
<img src="http://www.clker.com/cliparts/Y/f/v/m/p/3/flying-bird-md.png" id="image1" style="margin-top:100px;margin-left:130px;width:50px;"/>
</div>
Small div
<div id="smallcard"> </div>
<a href="#" id="btn">Click here</a>
请检查小提琴 - &gt; http://jsfiddle.net/gscq1jqw/1/
我希望通过缩小而不丢失任何像素来帮助将小div添加到小div中。请询问任何澄清。我的网站是http://thecardguys.co.ke/,我正在制作移动版
答案 0 :(得分:1)
已更新:
一些试验和错误让我们以css转换作为解决方案
$('#bigcard').css({'transform': 'scale(0.5)'});
当然,你最好把它放在一个接受元素和功能的函数中。比率,而不是硬编码。
<强>原始强>
嗯...将div放在另一个div中并不能完全模仿屏幕大小的变化。你将鸟类的位置设置在“Margin-top:200px”,这意味着它总是位于距离顶部200px的位置。所有元素都是基于侧面的pxls定位的,无论屏幕大小还是它们所属的任何div元素,它们都无关紧要。
考虑使用百分比代替定位。例如,将鸟设置为10%宽度和高度,并从左侧定位10%。这可以适当扩展。
.bigBird{
width:10%;
position:absolute;
top:50%;
left:20%;
}
为你做了一个小提琴。没有花太多时间让小提琴完美,但它应该给你一般的想法。假设我理解你想要正确做的事情 msdn article (我也可能或者可能没有在div上添加填充,没有明显的原因。你可以认为它是一个easteregg)
答案 1 :(得分:1)
$('#bigcard').css({'transform': 'scale(0.5)'});
JonasR给出的解决方案适用于我的案例