试图制作一个图像'在CSS中嵌入代码响应

时间:2016-11-24 02:41:46

标签: javascript html css wordpress

我有一个嵌入代码,用于从主机图片存档中获取单张图片。我想将嵌入附加到我的网站上,所以没有人可以将图片拖下来并偷走它。

问题是它需要对高度和宽度做出响应,并且嵌入中的设定值使得它非常困难。

我已将宽度更改为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 个答案:

答案 0 :(得分:0)

如果您不希望图片被盗,将其放入iframe将无法阻止。可以在带有图片的新窗口(或标签)中打开iframe的源。

话虽如此,你想要的一般想法就在这里:

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

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