适合大div到小div并保持比例：绝对元素

这个问题给了我一个噩梦，并拖延了一个项目。我有一个div是480px by 280px绝对定位的元素。文字，不同大小的图像。我想缩小div以适合移动设备300px by 180px。我试过CSS媒体查询，但字体大小，元素位置和图像尺寸保持不变，只有画布更改大小。适合大div到小div并保持比例：绝对元素

我的代码：

$(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>

请检查fiddle->http://jsfiddle.net/gscq1jqw/1/

我需要帮助的scalling下来，而不会丢失任何像素添加大格与小格。请询问任何澄清。我的网站是http://thecardguys.co.ke/和我建立一个移动版本

来源

2015-09-04 jonah

与php无关 – Epodax

当然。我很绝望。 – jonah

它是因为我试图循环创建div的html数据，并将每个元素的大小更改为较低的值。倾倒移动。你有一个想法@Epodax – jonah

更新时间：

位的试验和错误登陆我们的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%; 
}

为你做了一个小提琴。没有太多的时间让小提琴变得完美，但它应该给你一个大概的想法。假设我理解你想要正确地做到这一点是 https://jsfiddle.net/gscq1jqw/2/ （此外，我可能会或可能不会把填充了div没有明显的原因，你可以认为这是一种easteregg）

来源

2015-09-04 09:48:32 JonasR

嗨@Jonas，谢谢你的建议，我完全明白了。小提琴正在解决我的第一个问题。但我的应用程序使用绝对定位来对齐元素。这些元素是动态添加的，所以你真的可以特别对齐它们，请访问这里>> http://thecardguys.co.ke/customize_design.php?card=beautiful_business_cards_for_pet_stores,_farms_and&cid=115&step=2，看看我的观点。 – jonah

因此增加新的元素时，我使用jQuery的可拖动和resizable其置于绝对位置的元素。我希望能够缩小生成的html卡以适应更小的编辑器。希望你明白我的观点。并希望你对我有更多的想法 – jonah

那么，你可以尝试迭代子元素，并根据大小的变化调整它们的位置/宽度？你究竟希望它如何工作;在调整屏幕大小时完全响应，或者仅在基于窗口启动时进行调整？ – JonasR

$('#bigcard').css({'transform': 'scale(0.5)'});

解决方案通过JonasR给什么适用于我的情况

来源

2015-09-05 05:25:50 jonah

适合大div到小div并保持比例：绝对元素

回答

相关问题