Javascript 如何限制随框提交的图像的大小

您好，我正在使用ckeditor让用户发布图像，但问题是，用户发布的图像的大小可能太大。因此，我想知道如果内容太大以至于无法开箱即用，是否可以使用css或javascript隐藏内容（最好将内容最小化，但我不知道如何做到这一点）。 我使用引导面板作为一个盒子

<div class="panel-body">

{{ post.content|safe }}

    </div>

{{post.content | safe}}

---

此post.content不能太大，以至于它会从面板主体中消失，我应该如何防止它消失（隐藏内容）？

尝试在图像上设置最大宽度，如下所示：

.panel-body img {
   max-width: 100%;
}

---

尝试在图像上设置最大宽度，如下所示：

.panel-body img {
   max-width: 100%;
}

---

在容器上使用css

.panel body{overflow:hidden；}

隐藏溢出的内容（图像）

一个更优雅的解决方案是自动调整图像大小，使其不溢出容器宽度。您可以使用

.panel-body img {
    max-width:100%;
}

---

在容器上使用css

.panel body{overflow:hidden；}

隐藏溢出的内容（图像）

一个更优雅的解决方案是自动调整图像大小，使其不溢出容器宽度。您可以使用

.panel-body img {
    max-width:100%;
}

---

您可以在

.panel body

上使用css规则，例如：

.panel body{overflow:hidden；}

。这可以解决您的问题吗？您可以在

.panel body

上使用css规则，如下所示：

.panel body{overflow:hidden；}

。这解决了你的问题吗？谢谢。面板主体{overflow:hidden；}完成了这项工作，我没有img字段，因为我使用的是wyswyg编辑器。我不确定我是否理解你的评论，但是

。面板主体img

不选择带有类

img

的元素，它确实选择了

面板主体内的所有
img
标记。你试过了吗？ckeditor将图像视为一个内容，所以我不能真正玩图像，但使用overflow:hidden，如果图像太大，我可以直接隐藏，这对我来说足够了。面板主体{overflow:hidden；}完成了工作，我没有img字段，因为我使用的是wyswyg编辑器，或者我不确定我是否理解您的评论，但是
。面板主体img
不选择类
img
的元素，它实际上选择了
面板主体中的所有
img
标记。你试过了吗？ckeditor将图像视为一个内容，所以我不能真正玩图像，但使用overflow:hidden，如果图像太大，我可以直接隐藏，这对我来说已经足够了