Question

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

现在小图像显示正常但如果我使用大尺寸图像，宽度大于800像素的图像，图像将不会保持其宽高比和/或被剪裁。

查看（Laravel PHP刀片文件）：

<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对象适合的polyfill（如this）和JS iFrame调整大小实用程序（如this）的组合。

当iframe受其容器约束时，对象适合属性将调整图像大小以适合/覆盖iframe的边界（不更改宽高比），iframe调整大小会将iframe的大小调整为大小当图像小于iframe容器的边界时的图像。

集成这两个实用程序并不是一件容易的事，因为它们都会以可能影响另一个插件结果的方式改变页面的标记。我之前已经完成了非常类似的集成，并取得了成功。

将图像和视频动态拟合到iframe中

1 个答案: