Question

我正在扩展现有网站。我发布了该网站（如果你想看看click here）。我刚刚添加了一个非常简单的博客（用php和mysql制作）并且它运行良好，除了一件事。如果我将图像添加到新帖子或帖子中，则撰写帖子的人员可以调整其大小。问题是图像具有静态宽度和高度，然后如果我在移动设备上访问博客，则图像被剪切，因为它比设备的宽度大。我不知道如何解决它，我想我可以修改允许插入图像的插件来添加这些参数（这会使图像响应）：

max-width="['user selected width'], width=100%, height=auto

我一直试图修改插件，但我觉得很难理解，而且我对javascript的经验不是很多。 Here's the plugin.我使用tinymce编辑器编辑或添加帖子。任何人都知道我必须添加这些参数？谢谢。

Answer 1

on tinymceini把这....和voala

image_dimensions: false,
         image_class_list: [
            {title: 'Responsive', value: 'img-responsive'}
        ]

Answer 2

在文件content.min.css

中添加此类

img {
    max-width: 100%;
    height: auto;
}

Answer 3

找到解决方案，而不是修改生成tinymce的html代码来插入图像，我通过修改img来修改css样式表上的图像比例。我使用这段代码：

[element that contains the image] img {
width:100%;
height:100%;
}

Answer 4

以下是我使用 css 和 jquery 而不是 tinymce 插件找到的解决方案。

$(document).ready(function(){

    var tiny_images = $(this).find('img').map(function(){

        if($(this).attr('class') == undefined){
    
            if($(this).attr('src').indexOf("data:image")!=-1){
                $(this).addClass("tiny-img");
            }
            
        }

    }).get()

});

 .tiny-img {
    max-width: 100%;
    height:auto;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Answer 5

使用 CSS 是一种更安全的方法

img {
    max-width: 100%;
    height: auto;
}

响应式图像tinymce图像链接

5 个答案: