调整iframe图片的大小以匹配布局

问题描述

是否有任何方法可以调整右侧图片的尺寸，因为实际的GIF为500x500px，并且仅显示100x100px，但同时保持布局设计不变？任何帮助将非常感激！

我现在所拥有的（带有代码的演示）：http://jsfiddle.net/dkfn482L/

body {
  margin: 0;
}

.t_container::after {
  clear: both;
}

.t_iframe {
  position: relative;
  float: left;
}

.t_iframe iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.t_video {
  width: 64%;
  padding-top: 36%;
}

.t_image {
  width: 36%;
  padding-top: 36%;
}

@media (max-width: 768px) {

  .t_iframe {
    float: none;
    width: 100%;
  }

  .t_video {
    width: 100%;
    padding-top: 36%;
  }

  .t_image {
    width: 100%;
    padding-top: 100%;
    object-fit: cover;
  }

}

<div class="t_container">
  <div class="t_iframe t_video">
    <iframe frameborder="0" src="https://www.youtube.com/embed/jNQXAC9IVRw"></iframe>
  </div>

  <div class="t_iframe t_image">
    <iframe frameborder="0" scrolling="no" src="https://cdn.shopify.com/s/files/1/0436/5985/3990/files/ezgif.com-video-to-gif.gif?v=1597626410"></iframe>
  </div>
</div>

解决方法

您可以为Iframe提供“宽度”和“高度”属性，并设置固定值。

但是，您的CSS会覆盖iframe的自然宽度：

.t_image {
  width: 36%;
  padding-top: 36%;
}

尝试将<img>元素添加到iframe中，并为其指定高度和宽度的最小值。