问题标签 [image-enlarge]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
17 浏览

css - 放大时包含图像

我连续三个图像。它们在鼠标悬停时放大。问题在于,当它们扩大时,它们会交叉到周围的元素中。我的jsfiddle在这里。红色边框代表整个容器,黑色边框代表单个图像容器。所以我想做的是在鼠标悬停时放大每个图像,但放大不应超出黑色边框。我已经为此搜索了解决方案,并且我发现那些说要使用溢出:隐藏的解决方案,但这似乎没有什么不同。有人请指出错误吗?

0 投票
1 回答
49 浏览

jquery - 单击 SVG 形状并用另一个图像放大

我一直在寻找很多使用相同图像放大图像的示例

http://jsfiddle.net/a8c9P/

我正在寻找的是单击 SVG 形状(而不是图像),然后放大以显示另一个图像(而不是之前显示相同的图像)。

我正在使用 jquery 来执行此操作。

0 投票
1 回答
720 浏览

react-native - react-native webview 图片 点击放大

我的页面是后台程序返回的webview显示html代码。现在需要实现点击图片放大效果,如果页面多张图片,会出现图片列表,可以左右滑动。我现在没有解决这个问题。如果您知道如何解决请告诉我这个想法,或者将需要使用的组件告诉我。如果你有一个示例程序,那就更好了。非常感谢!

0 投票
2 回答
825 浏览

css - Is there a way to detect a mouseover in a grid-area of a CSS grid?

I don't have any code to provide as to what I've tried so far because it's just a hypothetical question at this point.

I have a large image, and it is centered width-wise in one area of a CSS grid. The large image is "zoned" into three vertical sections, with a smaller graphic inside each section (one in the left section, one in the middle, and one in the right section).

I am trying to have a version of each respective smaller graphic enlarged whenever a mouseOver or hover event takes place in the graphic element's respective vertical section.

Rather than split the large image into three adjacent images, I was wondering if I instead used three grid-areas for the large image, if it is possible to detect when a specific grid-area is hovered over or entered with the cursor. Any ideas?

0 投票
0 回答
252 浏览

php - 如何点击放大图片?

我正在为我的大学项目学习 PHP,并且已经用 PHP 做了很多事情。我正在使用 PHP 从数据库中获取图像,并希望在单击时放大它们。

0 投票
2 回答
1839 浏览

photoshop - 上下文感知比例图像编辑

我正在寻找在线或免费的图像编辑工具,它允许您以 Photoshop 允许的方式通过上下文感知缩放来缩放图像。只是我想水平缩放图像(在 x 轴上)而不缩放图像内容,而是用图像背景颜色填充添加的空间。

0 投票
2 回答
81 浏览

javascript - 我如何编辑 w3schools 代码以让两个或更多模态图像单击?

在为多个图像单击图像后,我无法调用该函数来显示模式。目前它仅适用于一张图片。如果在 js 代码和 html 代码中分配给变量的 id 对所有图像都相同,那么该函数不应该对所有图像都有效,而不仅仅是一个图像吗?我基本上有一个网站,我需要在其中显示 12 张图像。单击时每个都应放大。就像在 w3 学校代码中一样。

0 投票
1 回答
338 浏览

tkinter - 如何在网格中显示图像的缩略图,然后使用 tkinter 和 python 在新窗口中打开一个图像?

更新:想出了一个解决方案并更新为一个自我回答。

我在一个目录中有 20 张 jpg 图像。使用 Python 3.7 + Tkinter 8.6.10。我访问它们,调整大小并将它们显示在 aa 网格的主窗口中。网格有 12 行 x 5 列 = 60 帧。第 1 行中的所有帧都具有填充有调整大小图像的标签。第 2 行中的所有框架都有带有文本“放大”的标签。第 3 行中的所有框架都有带有文本“选择”的标签。这种模式重复。

带网格的主窗口很好,新窗口没有放大图像

单击“放大”按钮时,我想在新窗口中显示完整的未调整大小的图像。我在显示放大图像时遇到问题。一个新窗口打开,但没有图像。我在控制台中收到以下错误:-------------------- 控制台输出开始 ------------------ --

(ce7comb1) rohit@rohitu2004lts:~/PyWDUbuntu/thesis$ python3 test_gui_3.py 图像数 = 20 array= ['/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/371903.jpg', '/home/rohit/PyWDUbuntu/论文/Imgs2Detect_20imgs/2192573.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1989609.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1283466.jpg', '/home/rohit/PyWDUbuntu /thesis/Imgs2Detect_20imgs/371897.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1624481.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/36979.jpg', '/home/rohit/ PyWDUbuntu/thesis/Imgs2Detect_20imgs/148284.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/2209751.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1440465.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1369162.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/2069887.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1243756.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/2148982.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/984950.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1317156.jpg' , '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1920465.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1254659.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/2209317.jpg ', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/371902.jpg']/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1243756.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/2148982.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/984950.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1317156.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1920465.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1254659.jpg' , '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/2209317.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/371902.jpg']/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1243756.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/2148982.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/984950.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1317156.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1920465.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1254659.jpg' , '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/2209317.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/371902.jpg']/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1920465.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1254659.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/2209317.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/371902.jpg']/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1920465.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/1254659.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/2209317.jpg', '/home/rohit/PyWDUbuntu/thesis/Imgs2Detect_20imgs/371902.jpg']

n_rows = 12 n_cols = 5

Tkinter 回调 Traceback 中的异常(最近一次调用最后一次):文件“/home/rohit/anaconda3/envs/ce7comb1/lib/python3.7/tkinter/init .py ”,第 1705 行,调用中 return self.func(*args ) 文件“test_gui_3.py”,第 120 行,在 do_enlarge_btn_press_functionality image=img_orig) 文件“/home/rohit/anaconda3/envs/ce7comb1/lib/python3.7/tkinter/init .py ”,第 2766 行,在init Widget 中。init(self,master,'label',cnf,kw)文件“/home/rohit/anaconda3/envs/ce7comb1/lib/python3.7/tkinter/init .py ”,第2299行,在init (widgetName,self. _w) + extra + self._options(cnf)) _tkinter.TclError:图像“pyimage21”不存在

-------------------- 控制台输出结束 --------------------

这是python脚本的完整代码,我不知道我做错了什么。

请帮忙。

0 投票
2 回答
121 浏览

html - HTML CSS 图像增长

我想在 HTML 表单中添加 6 张图片。我想要 3 个在一行中,另外 3 个在下一行。用户将光标放在它应该放大但不应该干扰另一张图像的位置的任何图像上我还希望当光标位于任何图像上时图像放大。此外,当放大其中一张图像时,其他 5 张图像的位置不应移动。

有谁知道如何仅使用 HTML 和 CSS 来做到这一点?

0 投票
0 回答
48 浏览

android - 如何使用 IONIC 更改安卓手机的屏幕分辨率?

我可以使用 Ionic 更改我的 android 手机的屏幕分辨率吗?目的是放大字体和图像。这将适用于移动设备的所有应用程序和主屏幕。是否有任何离子包可以这样做?