javascript - 将图像和视频动态适配到 iframe 中

Question

我正在使用 Laravel PHP 从数据库中检索图像并将它们显示在我正在创建的博客应用程序中。我决定使用“iframe”标签，以便我可以在博客中检索和显示图片 和视频。然而，我遇到的问题与 CSS 相关，我正在尝试设置“iframe”的样式，以便它会根据不同大小的图像和视频调整其大小并同时保持其宽高比.

现在小图片可以正常显示，但如果我使用大尺寸图片，任何宽度大于 800 像素的图片，图片都不会保持其纵横比和/或被剪裁。

查看(Laravel PHP Blade 文件):

<div class="blog_img_container">
  <iframe class="blog_img_container_image" scrolling="no"
      src='{{asset("uploads/photos/" . $funnyblocks_blog->blog_photo_path ) }}' 
      onload='javascript:resizeIframeHeight(this);
      javascript:resizeIframeWidth(this);'  ></iframe><br>
      <p> {{ $funnyblocks_blog->blog_content}} </p>
</div>

CSS:

.blog_img_container {
    float:left;
    position:relative;
    width:60%;
}

.blog_img_container_image {
    display:block;
    max-width:100%; 
    max-height:400px; 
    margin-top:20px;
    overflow:auto;
}

.blog_img_container iframe {
    border:none; 
}

我还尝试使用我在“iframe”元素中的“onload”中调用的一些 Javascript，但它仍然没有产生预期的结果。

Javascript:

function resizeIframeHeight(obj) {
        obj.style.height= obj.contentWindow.document.body.scrollHeight + 'px';
   }
   function resizeIframeWidth(obj) {
        obj.style.width= obj.contentWindow.document.body.scrollWidth + 'px';            
   }

我真的不知道这是否是我应该使用的在单个元素(在本例中为“iframe”标记)中动态检索和显示图像和视频的正确方法。非常感谢任何帮助!

Answer 1

我建议结合使用 CSS3 object-fit 和 JS object-fit polyfill，例如 this和一个 JS iFrame 大小调整实用程序，如 this .

当 iframe 受其容器约束时，object-fit 属性将调整图像大小以适应/覆盖 iframe 的边界(不改变纵横比)，iframe resize 会将 iframe 调整为 iframe 的大小当图像小于 iframe 容器的边界时的图像。

集成这两个实用程序并非易事，因为它们都以可能影响其他插件结果的方式改变页面标记。然而，我以前做过非常相似的集成，并且取得了成功。