在 CSS TRANSFORM 之后消除元素底部的空白空间

Question

我的网页上显示了iframe。我希望iframe 在所有设备上都能响应，所以我使用 CSS 转换来适应大多数屏幕宽度。唯一的问题是当屏幕重新调整大小并且执行 CSS 转换时，它会在 iframe 下方创建一个空白区域。有没有办法摆脱空白。可以用jquery解决吗？

访问http://vintagebase.com

以下是响应式 CSS 示例

---#Tablet (Portrait)---

@media only screen and (min-width: 768px) and (max-width: 959px) {
  body:after {
    content: "768 to 959px";
    background-color: hsla(270,60%,40%,0.7);
  }

  #iframe1{
    width: 125%; 
    -moz-transform:           scale (.8);
    -moz-transform-origin:    0 0;
    -o-transform:             scale(.8);
    -o-transform-origin:      0 0;
    -webkit-transform:        scale(.8);
    -webkit-transform-origin: 0 0;
    -ms-transform:            scale(.8);
    -ms-transform-origin:     0 0;
  }
}

Answer 1

您将 iframe 高度设置为非常大。不要那样做。而是让它 100%。