响应图像tinymce图像链接

Responsive image tinymce image link

本文关键字：图像 链接 tinymce 响应      更新时间：2024-03-05

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

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

我一直在尝试修改这个插件，但我发现它很难理解，而且我在javascript方面也不是很有经验。这是插件。我正在使用tinymce编辑器来编辑或添加帖子。有人知道我必须添加这个参数吗？非常感谢。

在tinymceini上放了这个。。。。和voala

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

在文件content.min.css 中添加此类

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

无需通过单独的te-css处理此问题。您可以在tinymce编辑器中添加图像时应用"img responsived"类。

在您的tintmce编辑器属性中添加以下属性：

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

推荐人和学分：http://archive.tinymce.com/forum/viewtopic.php?pid=114620#p114620

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

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

下面是我使用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>

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

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

对于版本5，您希望将相同的代码放在/skins/ui/oxide和/skins/ui/oxide暗内容.css文件的末尾。

/* <your name> added the following to create responsive images */
img {
    max-width: 100%;
    height: auto;
}
相关文章：