获取将图像调整为其容器大小的脚本的名称+其他功能

Getting the name of a script that resize images to its container + other features

本文关键字：脚本 功能 其他 调整 图像 获取      更新时间：2023-09-26

我访问了一个我非常喜欢的网站，因为它的功能。点击此处进入网站

我想开发一些类似的东西，可以从wordpress CMS管理。我想知道我是否可以购买或使用已经处理了所有这些的插件/脚本：

  • 有一个网格生成器，允许我们定义每个项目的大小（宽度和高度）+订单项目
  • 能够在块内添加背景图像
  • 背景图像必须在其容器的大小内按比例缩放
  • 能够使用css类更新布局（如果需要）
  • 增加了在悬停+标题+风格+文本+链接等上实现不同图像的能力

任何链接/示例/插件都非常受欢迎，感谢

您正在寻找我们在德国称之为"产卵、产奶的长毛母猪"的东西。这意味着：像这样的东西根本不存在。

但你可以使用gridster绕过困难的部分，添加一些非常简单的功能：

<div class="gridster">
   <ul>
     <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
   </ul>
</div>
<input type="text" placeholder="CSS Class" class="classname">
<input type="text" placeholder="Content" class="content">
<input type="text" placeholder="Image URL" class="imageurl">
<button class="add">Add</button>

在加载DOM时的脚本文件中：

//init gridster
 var gridster = $(".gridster ul").gridster().data('gridster');
//get the content
var myDynamicClass=$("input.classname").val();
var myDynamicContent=$("input.content").val();
var myDynamicImage='style="background-image:url('+$("input.imageurl").val()+')  no-repeat center center fixed; background-size: cover;"';
//add a new grid element to gridster
$("button.add").click(function(){
    gridster.add_widget('<li class="'+myDynamicClass+'" '+myDynamicImage+'>'+myDynamicContent+'</li>', 2, 1);
});

编辑：您可以使用js自己实现裁剪和调整大小的工具。这是我几天前做的一个完整的客户端解决方案。基本上，您可以用javascript操作它，将它加载到画布中，裁剪它，然后将画布保存为图像。

相关文章：