動的に作成される画像のサイズを変更するCSSコード

Question

CSSコードで画像の幅と高さのサイズを変更したい。アップロード画像ボタンはアプリケーションで動的です。私のコードでimg/divタグのid/classという名前を与えることはできません。

以下

これらのタグが動的に作成されているように私は、CSSのコードを動的に画像の幅と高さを設定する必要があるため、既存のコードが、私はインラインCSSを記述することはできませんです。私は、以下試した

<div class="note-editable panel-body" contenteditable="true" style="height: 300px;"> 
    <p><img src="data:image/jpeg;base64,... " data-filename="xyz.png" style="width:550px;"> 
</div> 

CSSコードがありますが、画像のサイズを変更できません。

.note-editable .panel-body > img { 
    width:200px; 
    height:200px; 
} 

任意の提案が役に立ちます。

Answer 1

あなたのイメージが同様に段落内にあることを考慮してください。

.note-editable > p > img { 
     width:200px !important; 
     height:200px; 
} 

！すでにインラインスタイルであり、あなたはそれを覆す必要があるため、あなたの幅は重要です。それはあなたのためにそれを行います。

Answer 2

使用！重要なCSSで

.note-editable .panel-body img { 
      width:200px !important; 
      height:200px !important; 
} 

Answer 3

CSSにエラーがあります。 imgは直系の子孫ではないため、>は機能していません。 また、あなたは、このように、一緒にあなたの2つのクラスを記述する必要があります：あなたはpタグ内にある.note-editable.panel-body

.note-editable.panel-body img { 
 
    width: 200px !important; /* !important is not cool - just to overwrite the inline styles */ 
 
    height: 200px !important; /* !important is not cool - just to overwrite the inline styles */ 
 
    display: block; 
 
}

<div class="note-editable panel-body" contenteditable="true" style="height: 300px;"> 
 
<p><img src="http://lorempixel.com/900/300/nightlife/" data-filename="xyz.png" style="width:550px;"></p> 
 
</div>

Answer 4

.note-editable .panel-body p img { 
     width : 200px !important; 
     height :200px !important; 

}

注uは上記のように追加する必要がありますので、