javascript - 在一个小 div 中缩放一个大 div

Question

我有一个.little块，它总是有 300px 宽度。我有.big块，可能有 500px、800px、1000px 等。我需要一个解决方案，如何在里面显示大 div。没有overflow:scroll;或overflow:hidden;。我需要通过缩放来解决。

就像您在手机上打开桌面网站版本时，它会显示所有没有水平滚动的网站，或者像大图像可以覆盖在一个小块内。

<div class="little">
  <div class="big">
    Text, images and other content 
  </div>
</div>

.little{
  width: 300px;
  height: 300px;
}
.big{
  width: 800px; /*can be different*/
  height: 1000px;  /*can be different*/
}

标签： javascripthtmlcss

Answer 1

如果您的大 div 在您的小 div 内，您是否尝试使用max-widthand设置特定的 CSS max-height？

.little{
  width: 300px;
  height: 300px;
}
.big{
  width: 800px; /*can be different*/
  height: 1000px;  /*can be different*/
}
.little .big {
  max-width: 300px;
  max-height: 300px;
}