動態地將圖像和視頻嵌入iframe

我使用Laravel PHP從數據庫檢索圖像並將它們顯示在我創建的博客應用程序中。我決定使用'iframe'標籤，以便我可以在博客中檢索並顯示圖片和視頻。然而，我遇到的問題與CSS有關，我試圖設計'iframe'，以便它將尺寸調整爲不同尺寸的圖像和視頻，並同時保留它們的寬高比。動態地將圖像和視頻嵌入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; 
}

我用一些JavaScript，我在 '的onload' 內被叫也嘗試'iframe'元素，但它仍然沒有產生期望的結果。

的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'標籤）。任何幫助是極大的讚賞！

來源

2015-01-08 Jeff P.

只是不使用iFrame會不會更容易？ – adeneo

@ adeneo是的，它會更容易哈哈。所以我想知道是否有一種方法可以使用單個元素來正確顯示圖像和視頻。 –

就我所知，幾乎任何元素都可以包含圖像或視頻標籤，那麼「單個元素」是什麼意思？ – adeneo

我建議使用CSS3對象適合和JS對象適合polyfill（如this）和JS iFrame調整大小實用工具（如this）的組合。

當iframe受其容器約束時，對象適合屬性將調整圖像的大小以適應/覆蓋iframe的邊界（不改變寬高比），並且iframe調整大小會將iframe的大小調整爲當圖像小於iframe容器的邊界時的圖像。

集成這兩個實用程序並不是微不足道的，因爲它們都會以可能影響其他插件結果的方式更改頁面的標記。在完成之前，我做了非常類似的整合，並取得了成功。

來源

2015-01-08 17:52:33 stealthwang

動態地將圖像和視頻嵌入iframe

回答

相關問題