时间戳

首页 > 解决方案 > 如果只有内容是图像本身，Firefox 和 Chrome 等浏览器如何处理图像大小调整？

html - 如果只有内容是图像本身，Firefox 和 Chrome 等浏览器如何处理图像大小调整？

问题描述

如果导航到图像文件，我想实现与 Chrome 或 Firefox 等浏览器类似的行为。

这是一个示例图像：

图片

如果我在 Firefox 中导航到这张图片，我会看到一张图片，如果我将鼠标悬停在它上面，我会看到一个放大光标。如果我检查元素，我可以看到 Firefox 创建了一个“虚拟”页面来显示图像。

<head>
    <meta name="viewport" content="width=device-width; height=device-height;">
    <link rel="stylesheet" href="resource://gre/res/ImageDocument.css">
    <link rel="stylesheet" href="resource://gre/res/TopLevelImageDocument.css">
<link rel="stylesheet" href="chrome://global/skin/media/TopLevelImageDocument.css>
 <title>Plaza_de_la_República,_Ereván,_Armenia,_2016-10-02,_DD_113-114_HDR.jpg (JPEG Image, 1280&nbsp;×&nbsp;842 pixels) - Scaled (53%)</title> 
</head>
<body>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Plaza_de_la_Rep%C3%BAblica%2C_Erev%C3%A1n%2C_Armenia%2C_2016-10-02%2C_DD_113-114_HDR.jpg/1280px-Plaza_de_la_Rep%C3%BAblica%2C_Erev%C3%A1n%2C_Armenia%2C_2016-10-02%2C_DD_113-114_HDR.jpg" alt="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Plaza_de_la_Rep%C3%BAblica%2C_Erev%C3%A1n%2C_Armenia%2C_2016-10-02%2C_DD_113-114_HDR.jpg/1280px-Plaza_de_la_Rep%C3%BAblica%2C_Erev%C3%A1n%2C_Armenia%2C_2016-10-02%2C_DD_113-114_HDR.jpg" class="shrinkToFit" height="450" width="684">
</body>

为了清楚起见，这里是<img>元素：

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Plaza_de_la_Rep%C3%BAblica%2C_Erev%C3%A1n%2C_Armenia%2C_2016-10-02%2C_DD_113-114_HDR.jpg/1280px-Plaza_de_la_Rep%C3%BAblica%2C_Erev%C3%A1n%2C_Armenia%2C_2016-10-02%2C_DD_113-114_HDR.jpg" alt="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Plaza_de_la_Rep%C3%BAblica%2C_Erev%C3%A1n%2C_Armenia%2C_2016-10-02%2C_DD_113-114_HDR.jpg/1280px-Plaza_de_la_Rep%C3%BAblica%2C_Erev%C3%A1n%2C_Armenia%2C_2016-10-02%2C_DD_113-114_HDR.jpg" class="shrinkToFit" height="450" width="684">

如果我单击图像，图像会调整大小。在这种情况下，因为它是一张大图片而被拉伸，光标变为缩小。如果我检查图像，我会看到该类已更改。

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Plaza_de_la_Rep%C3%BAblica%2C_Erev%C3%A1n%2C_Armenia%2C_2016-10-02%2C_DD_113-114_HDR.jpg/1280px-Plaza_de_la_Rep%C3%BAblica%2C_Erev%C3%A1n%2C_Armenia%2C_2016-10-02%2C_DD_113-114_HDR.jpg" alt="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Plaza_de_la_Rep%C3%BAblica%2C_Erev%C3%A1n%2C_Armenia%2C_2016-10-02%2C_DD_113-114_HDR.jpg/1280px-Plaza_de_la_Rep%C3%BAblica%2C_Erev%C3%A1n%2C_Armenia%2C_2016-10-02%2C_DD_113-114_HDR.jpg" class="overflowingVertical">

班级已从 更改shrinkToFit为overflowingVertical。

但是这是怎么做到的呢？没有onClick()事件。我看不到任何执行的javascript？是否有内部 Firefox 黑客攻击？

Chrome 做了类似的事情。因此，也欢迎对其方法的解释。

标签： htmlcss

解决方案

推荐阅读