如何限制获取图片的大小

问题描述：

您好我正在使用ckeditor让用户发布图片，但事实是，用户发布的图片的大小可能太大。所以我想知道如果我可以使用一些CSS或JavaScript来隐藏内容（如果内容太大以至于无法使用内容，则最好将内容最小化，但我不知道如何做到这一点）框。我使用的引导面板作为一个盒子如何限制获取图片的大小

<div class="panel-body"> 

{{ post.content|safe }} 

    </div>

这post.content不能过大，它熄灭面板身体，我应该如何从中走出去（隐藏内容）预防？

你可以在你的'.panel-body'上使用一个css规则，如下所示：'.panel-body {overflow：hidden; }'。这是否解决您的问题？ – PinkTurtle

答

使用CSS .panel-body { overflow:hidden; }你的容器来隐藏溢出的内容（图像）上。

一个更优雅的解决方案可以是自动调整图像的大小，使其不会溢出容器宽度。你可以通过以下方式实现：

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

谢谢.panel-body {overflow：hidden;我没有img字段，因为我使用的是wyswyg编辑器 –

不知道我理解你的评论，但'.panel-body img'没有选择类为'img'的元素，它确实选择了所有' img'标签在你的'.panel-body'里面。你试过了吗？ – PinkTurtle

ckeditor像一个内容对待图像，所以我不能真正玩图像，但溢出：隐藏我可以隐藏，如果它变得太大，这对我来说就够了 –

答

尝试将最大宽度上您的图像，像这样：

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