css代碼來調整動態創建的圖像的大小

我想通過我的CSS代碼調整圖像的寬度和高度。上傳圖像按鈕在我的應用程序中是動態的。我無法通過我的代碼爲img/div標籤指定id/class的名稱。css代碼來調整動態創建的圖像的大小

下面是現有的代碼爲我需要動態地通過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; 
}

任何建議將是有幫助的。

來源

2017-02-27 DIM

要考慮到你的形象是一個段落內爲好。

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

！重要的是你的寬度，因爲它已經內聯風格，你需要推翻它。那會爲你做。

來源

2017-02-27 16:35:22 HisPowerLevelIsOver9000

使用！在CSS重要

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

來源

2017-02-27 16:31:47 Fabio

它沒有影響，可能是如果你注意到我的src的圖像，src =「data：image/jpeg; base64，...」它的轉換圖像爲base64格式，是不是它指定了寬度和高度的原因？ – DIM

你從css規則中刪除了嗎？它應該是這樣的：.note-editable .panel-body img – Fabio

謝謝大家，我接受的答案已經爲我工作。 – DIM

您的CSS出現錯誤： img不是直系後代，因此>不起作用。你也需要你的兩個班一起寫，像這樣：.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>

來源

2017-02-27 16:37:35

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

}

需要注意的是p標籤內，這樣你們需要添加像上面

來源

2017-02-28 10:14:12 narenvaranasi

css代碼來調整動態創建的圖像的大小

回答

相關問題