CSSで応答する「イメージ」埋め込みコードを作成しようとしています

Question

ホストピクチャアーカイブから取得した単一のイメージの埋め込みコードがあります。私は自分のウェブサイトに埋め込みを添付して、誰も画像をドラッグして盗むことはできません。

問題は、高さと幅に応答する必要があり、埋め込みの設定値が非常に困難になっていることです。

幅を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> 

Answer 1

画像を盗まれたくない場合は、画像をiframeに入れてもそれを防ぐことはできません。 iframeのソースは、画像とともに新しいウィンドウ（またはタブ）で開くことができます。

ということで、あなたが望む一般的な考えはここにある：

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

あなたが底に適切なパディングを含むdiv要素にあなたのiframeを入れて、100％に幅と高さを設定します含まれている部門のパディングは高さを幅のパーセンテージとして覚えておいてください。たとえば、4：3画像を埋め込んでいる場合、パディングボトムは3/4、つまり75％になります。