从中心即时裁剪图像 - Javascript?

2024-02-02

我有一堆图像,它们的宽度和高度各不相同。

有些是正方形,有些是矩形,但我希望它们全部都是我选择的宽度和高度。

我知道我可以在中使用 width="" 和 height=""

那么,我正在寻找的是一个可能的 javascript 解决方案,也许使用 jQuery,它将动态地从中心裁剪图像?

这可能吗?


您可以使用 CSS 将图像放置在容器内。然后确保该容器上设置了溢出:隐藏。

例如:

<style>
.container     { position: relative; overflow: hidden; }
.container img { position: absolute; }
</style>

<div class="container">
    <img src="..."/>
</div>

<script type="text/javascript">
$image = $('.container img');
width = $image.width();
height = $image.height();

$image.css({
    left: 0 - (width / 2),
    top: 0 - (height / 2)
});
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从中心即时裁剪图像 - Javascript? 的相关文章

  • 在网页上的文本框中键入内容时删除所有空格

    我如何在用户打字时即时删除输入到文本框中的空格 function var txt myTextbox var func function txt val txt val replace s g txt keyup func blur fun
  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • Node.js - console.log 不显示数组中的项目,而是显示 [Object]

    我在注销对象内数组的内容时遇到问题 实际的物体看起来像这样 var stuff accepted item1 item2 rejected response Foo envelope from The sender to new item1
  • 在为 RXJS 可观察量编写测试时,如何避免让调度程序通过我的业务逻辑?

    我发现使某些测试通过的唯一方法是显式地将调度程序传递给函数 为了便于说明 请考虑以下函数 function doStuff stream return stream delay 100 filter x gt x 2 0 map x gt
  • javascript中按tab键时如何调用函数?

    我有一个这样的功能 function whenEmpty field if field value field style backgroundColor ffcccc alert Please fill the field field f
  • 通过 node-http-proxy 保留基于 cookie 的会话

    我有一个简单的基于 Express 的 Node js Web 服务器 用于开发 JavaScript 应用程序 我将服务器设置为使用 node http proxy 来代理应用程序向在不同域和端口上运行的 Jetty 服务器发出的 API
  • Javascript - 将值从下拉框传递到 Google Maps API

    我正在使用 Google 地图 API 为一家出租车公司创建报价表 目前 用户在 2 个文本框中输入出发点和接载点 API 会计算两点之间的距离以及行程费用 我正在尝试添加两个具有设定位置的下拉框 以便用户可以选择这些位置之一或使用文本框输
  • 是否有任何非轮询方式来检测 DOM 元素的大小或位置何时发生变化?

    很长一段时间以来 我一直在寻找一种方法来检测 DOM 元素的大小或位置何时发生变化 这可能是因为窗口调整了大小 或者因为向该元素添加了新的子元素 或者因为在该元素周围添加了新元素 或者因为 CSS 规则已更改 或者因为用户更改了浏览器的字体
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • Typeahead.js substringMatcher 函数说明

    我只是在做一些研究Typeahead js这是一个非常酷的图书馆 感谢文档 我已经成功地获得了一个基本的示例 该文档也非常好 但是我试图弄清楚以下代码块实际上在做什么 var substringMatcher function strs r
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • 如何使JavaScript函数在Eclipse“大纲视图”中可见?

    我有这样的代码 但如果它在匿名函数中定义 则无法打开函数大纲 类没有问题 我该如何概述something2 请分享一些提示 我可以将所有函数标记为构造函数 但这是无效的方法 start of track event required deb
  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r
  • IE11不监听MSFullscreenChange事件

    我正在尝试使用 Bigscreen js 在 IE11 中使用全屏 但 IE11 不监听 MS FullscreenChange 事件 document addEventListener MSFullscreenChange functio
  • 如果数字小于 10,则显示前导零 [重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 相当于 printf string format https stackoverflow com questions 610406 javascript equivalent t
  • 如何在 Google 地图 V3 中创建编号地图标记?

    我正在制作一张上面有多个标记的地图 这些标记使用自定义图标 但我还想在顶部添加数字 我已经了解了如何使用旧版本的 API 来实现这一点 我怎样才能在V3中做到这一点 注意 当您将鼠标悬停在标记上时 标题 属性会创建一个工具提示 但我希望即使
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 在 Javascript 中减少/分组数组

    基于this https stackoverflow com a 40774906 3254598例如 我想以稍微不同的方式按对象进行分组 结果应该如下 key audi items make audi model r8 year 2012
  • 如何在打字稿文件中导入没有定义文件的js库

    随着我们的项目变得越来越大 我想从 JavaScript 切换到 TypeScript 以帮助进行代码管理 然而 我们使用许多库作为 amd 模块 我们不想将其转换为 TypeScript 我们仍然想将它们导入 TypeScript 文件
  • 单击列表时使用 bootstrap Dropdown 防止下拉菜单消失

    我正在使用使用引导下拉菜单 http twitter github com bootstrap javascript html dropdowns生成下拉菜单 我想防止点击菜单时菜单消失 我已经实现了以下代码 但它不起作用 知道如何修复它吗

随机推荐

  • 绘制位图 C# [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我正在尝试使用位图类在屏幕上绘制图像
  • 标准库算法是否允许复制谓词参数?

    假设我们想从向量中删除重复值ints 通常的解决方案是对向量进行排序并使用擦除删除惯用语删除重复项 但我们需要保持不会被移除的元素的顺序 所以我们无法排序 所以人们可能会想出这样的谓词并使用 with withremove if算法 str
  • 任意或自定义 URL 的 Rails 功能测试

    我的 Rails 应用程序中有一个名为 Photo 的 RESTful 资源 我在用着回形针 http www thoughtbot com projects paperclip为我的照片提供不同的 样式 缩略图等 并且我使用自定义路由来以
  • 是否可以通过 AJAX 加载 tumblr 帖子?

    我只是想知道是否可以通过 AJAX 加载 tumblr 帖子 我知道可以使用注释 但我想内联加载帖子的内容 我不是在谈论无限滚动 Thanks 对的 这是可能的 我编写了一些代码来读取帖子的标题并在我的网站上创建一个菜单 您可以访问帖子的全
  • 如何向我的 UIPageViewController 添加多个 ViewController?

    所以我对 Obj C 很陌生 并尝试查看示例代码和其他在线资源来回答我的问题 但我似乎找不到任何真正有帮助的东西 本质上 我想做的是将我在 Storyboard 中创建的多个 UIViewController 添加到 UIPageViewC
  • 分而治之和递归

    我想知道分而治之的技术是否总是将一个问题划分为同一类型的子问题 通过相同类型 我的意思是可以使用递归函数来实现它 分而治之总是可以通过递归来实现吗 Thanks 总是 是一个可怕的词 但我无法想到不能使用递归的分而治之的情况 根据定义 分而
  • 有条件包含在 linq to 实体中?

    我觉得以下应该是可能的 我只是不确定采取什么方法 我想做的是使用 include 方法来塑造我的结果 即定义沿对象图遍历多远 但是 我希望这种遍历是有条件的 something like dealerships include d gt d
  • 将 numpy 数组保存为 jpg 格式的 io.BytesIO

    我正在使用 xlsxwriter 在 python 代码中将图像插入到 Excel 中 现在 我在 opencv 处理之后有了图像数据 numpy 数组 我想将此图像数据插入到 Excel 中 但 xlswriter 仅支持 io Byte
  • 是否有使用线程池的 std::async 实现?

    标准功能std 异步 http en cppreference com w cpp thread async 模板函数 async 异步运行函数 f 可能在一个单独的线程中 该线程可能是线程池的一部分 并返回一个 std future 它最
  • 我们如何删除 Liferay 徽标、登录超链接和 Powered BY ?从屏幕上

    我使用 Liferay 6 和 Tomcat 进行开发 我为我的应用程序开发了一个自定义登录 POrtlet 现在进入http 本地主机 8086 http localhost 8086 显示我的自定义登录页面 请查看屏幕截图 我的问题是
  • Objective C + Reskit - 如何用键包装我的字典以避免格式问题?

    我正在尝试用密钥包装我的 HTTP POST 请求 换句话说 我想把这个变成 category id gt 1 food name token gt Pizza id gt 1 进入这个 dish gt category id gt 1 f
  • 继承公共接口的枚举中的代码重复

    我有几个符合通用接口的枚举 interface TableColumns String getColumnName int getColumnIndex ColumnType getColumnType boolean isEditable
  • 用C++计算字符串的MD5

    我有一个很好的内存映射文件示例 用于计算文件的 MD5 哈希值 效果很好 没有任何问题 我想改变它来计算字符串的 MD5 哈希值 所以例子是 包括 include
  • 任务计划程序 - 在未登录的情况下运行任务时访问非本地驱动器

    我在 win 调度程序中有一个每分钟运行的任务 该任务运行一个 bat 文件 SVN 会更新一系列文件夹 然后执行一个 perl 脚本 该脚本又会运行其他几个脚本 Perl 脚本的输出 日志 按日期 时间标记 被发送到共享驱动器 而不是任务
  • 弃用警告:危险的查询方法:ActiveRecord >= 5.2 中的随机记录

    到目前为止 common https stackoverflow com a 25577054 2995613从数据库获取随机记录的方法是 Postgress Model order RANDOM first MySQL Model ord
  • 将 ToolStripMenuItem 动态添加到 MenuStrip (C#/ Winforms)

    我已经实施了我的解决方案 基本解决方案 我很高兴 问题是 当我使用 Add 方法向 ToolStripItemCollection 添加新项目时 我得到了一些重载 有意义的重载是字符串参数 图像参数和 EventHandler 参数 因为我
  • 验证三个立方之和等于 33:在 R 中失败,在 Python 中有效

    最近 找到了以下方程的整数解 x 3 y 3 z 3 33 也就是说 它适用于x 8866128975287528 y 8778405442862239 z 2736111468807040 https en wikipedia org w
  • GnuPGME:GPG 签名 C++

    有没有人写过任何教程或有任何关于如何使用的文档GnuPGME http www gnupg org related software gpgme index en html所以我可以编写一个函数 例如gpgSign std string f
  • Session具体是做什么的?为什么不把ip和域名session看成一样呢?

    我想知道session具体有哪些 这不限于一种语言 下面仅以 php 为例 我使用 php session 当我使用我的网站域名时它运行良好 为了在 Windows 操作系统上的本地 vmvare ubuntu 中测试该网站 我更改了 Wi
  • 从中心即时裁剪图像 - Javascript?

    我有一堆图像 它们的宽度和高度各不相同 有些是正方形 有些是矩形 但我希望它们全部都是我选择的宽度和高度 我知道我可以在中使用 width 和 height 那么 我正在寻找的是一个可能的 javascript 解决方案 也许使用 jQue