Question

我想通过CSS代码调整图像宽度和高度。上传图片按钮在我的应用程序中是动态的。我无法通过我的代码为id / class代码提供img / div名称。

下面是我需要通过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

在CSS中使用！important

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

Answer 2

考虑到您的图片也在一个段落中。

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

！对你的宽度很重要，因为它已经内联样式，你需要推翻它。那会为你做的。

Answer 3

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>

Answer 4

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

}

请注意，您在p标签内，因此您需要添加如上所述

css代码用于调整动态创建的图像的大小

4 个答案: