Javascript 获取将图像调整为其容器大小的脚本的名称+；其他特征

我访问了一个我非常喜欢的网站。

我想从wordpress CMS中开发类似的东西。 我想知道我是否可以购买或使用已经解决了所有这些问题的插件/脚本：

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

---

欢迎使用任何链接/示例/插件，谢谢您正在搜索我们在德国称之为“产蛋、产奶的羊毛母猪”的内容。这意味着：像这样的东西根本不存在

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

<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);
});

//init gridster
var gridster=$（“.gridster ul”）.gridster（）.data（'gridster'）；
//获取内容
var myDynamicClass=$（“input.classname”）.val（）；
var myDynamicContent=$（“input.content”）.val（）；
var myDynamicImage='style=“背景图像：url（+$（'input.imageurl”）.val（）+”）无重复中心固定；背景大小：cover；“；
//将新网格元素添加到gridster
$（“button.add”）。单击（函数（）{
添加小部件（“
“+myDynamicContent+”
”，2,1）；
});

编辑：

---

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

谢谢您的帮助，非常有用。但是，我最关注的是一个脚本，用于调整/裁剪容器中的图像。它必须负责任地工作