試圖在CSS中創建一個「圖像」嵌入代碼響應

Question

我對從主機圖片歸檔中獲取的單個圖像有一個嵌入代碼。我想將嵌入內容附加到我的網站上，因此沒有人可以拖動圖片並將其盜走。

問題是它需要響應高度和寬度，並且嵌入中的設置值使其變得非常困難。

我已將寬度更改爲100％，但顯然它使高度無響應 - 高度當前設置爲1000.我可以手動更改它們，但不符合所有設備。

我需要的圖像縮小到血腥的設備，我就用它和響應，如果我做我的瀏覽器更小或更大

這裏是嵌入代碼，我已經投入我的CSS WordPress的：

<iframe id="embed-frame-11855" style="border: 0px none;" src="(URL)" width="686" height="1000" scrolling="no" data-image-link="(URL)"></iframe> 

Answer 1

如果您不希望圖片被盜，將其放入iframe中並不會阻止該圖片。 iframe的來源可以在圖片的新窗口（或標籤）中打開。

雖這麼說，您要的總體思路是在這裏：

http://alistapart.com/article/creating-intrinsic-ratios-for-video/

你把你的iframe到一個包含分區與適當的填充在底部，設置寬度和高度爲100％包含div的。請記住，您的填充是以寬度的百分比表示的高度。因此，如果您嵌入4：3圖像，則您的填充底部將爲3/4或75％。