Javascript 试图使“图像”嵌入代码响应CSS

我有一个嵌入代码，用于从主机图片存档中获取的单个图像。我想附加嵌入到我的网站，这样就没有人可以把图片拖下来，并窃取它

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

我已经将宽度更改为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>

---

如果你不想让照片被盗，那么把它放进iframe并不能防止被盗。iframe的源可以在带有图片的新窗口或选项卡中打开

话虽如此，您想要的总体思路如下：

---

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

请不要对我们大喊大叫-耐心且富有建设性，我们将更有可能提供帮助。欢迎使用Stack Overflow！您可以通过格式化代码以提高可读性和消除滚动来改进问题。