2017-02-15 13 views
1

私は現在、ユーザーが画像を任意のサイズに切り替えることができるリッチテキストベースのテンプレートシステムでこれを実現しようとしています。imgタグを変更せずにdiv内に画像を収める方法は?

ユーザーは、自身の幅と高さを持つ新しい<img>に置き換え、以前のスタイリングを削除、別の画像を切り替えるUNTIL <img src="path/image.jpg" style="max-width: 100%; max-height: 100%;" >が正常に動作するようにシステムが唯一のスタイルのインライン、 に私を可能にします。

私は既に <style></style><style type="text/css"></style><link>を使ってみましたが、システムは無視しています。

imgタグを変更することなく、このインラインでを解決できますか? これは、それが今日のようなコードです:

<div style="float: left; text-align: center; display:inline-block; margin: 0 auto; width:450px;height:450px;"> 
<img src="http://i.imgur.com/cnI4YIs.png" width="450px" height="450px" alt="" /> 
</div> 
+0

JavaScriptが動作するかどうか知っていますか? –

+1

CSSを置くことができない場合は、コンテンツが変更された後にスタイルをインライン化するJSソリューションを用意する必要があります。おそらくイメージが 'max-width'と' max-height'スタイリングをインラインに変更したときにイベントを起こすでしょうか? – romellem

答えて

1

ありがとうございましたが、今私はそれが独自の方法で良いと思います。 JSで動作するかどうかはわかりませんが、テンプレート内で変更を加えた後、実際のサイトに貼り付けるコードをコピーしてテンプレート広告を公開するようにします(リッチテキストでも動作します入力)、変更は自動的にインラインになります。

つまり、<style></style>の要素をテンプレートシステムに保存し、パブリッシュシステムに保存して、変更を行わないようにします。

PS ...私はこれを説明する方法がわからない、または、なぜそれが起こっているが、それはとにかく動作します:両方のサイトは、コードを編集するのTinyMCEを使用するので、答えを探すために有用であり得ますTinyMCE設定について(タグ<style>を有効にするように)もちろん、管理者権限を持っている場合に限ります。私はしませんでした。