尝试在 CSS 中制作响应式“图像”嵌入代码答案

【问题标题】：Attempting to make an 'IMAGE' Embed code responsive in CSS尝试在 CSS 中制作响应式“图像”嵌入代码
【发布时间】：2016-11-24 02:41:45
【问题描述】：

我有一个从主机图片存档中获取的单个图像的嵌入代码。我想将嵌入附加到我的网站，这样任何人都无法将图片拖走并窃取它。

问题是它需要对高度和宽度做出响应，而嵌入中的设置值使其变得非常困难。

我已将宽度更改为 100%，但显然它使高度无响应 - 高度当前设置为 1000。我可以手动更改它们，但它并不适用于所有设备。

如果我将浏览器变小或变大，我需要将图像缩小到我正在使用它的血腥设备并做出响应

这是我在 Wordpress 上的 CSS 中放入的嵌入代码：

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

【问题讨论】：

【解决方案1】：

如果您不希望图片被盗，将其放入 iframe 不会阻止这种情况。 iframe 的源代码可以在带有图片的新窗口（或选项卡）中打开。

话虽如此，您想要的总体思路就在这里：

您将 iframe 放入底部带有适当填充的包含 div，并将宽度和高度设置为包含 div 的 100%。请记住，您的填充是您的高度占宽度的百分比。因此，例如，如果您要嵌入 4:3 图像，则您的 padding-bottom 将是 3/4，即 75%。

【讨论】：