javascript - 图片 URL 在页面加载时调整大小

标签 javascript html css image scaling

所以我发现了一堆无法以正确方式显示的图像。

我们有这个非常简单的例子:

<body>
    <img src="http://vignette2.wikia.nocookie.net/runescape2/images/4/47/Santa_hat.png/revision/latest?cb=20111128052051" />
</body>

虽然在浏览器中运行此代码段时它会调整大小,但此特定图像具有(或应该具有)尺寸 28x23。

我认为这些图片存在一些格式问题,导致我无法按真实尺寸显示它们。

我实现此功能的唯一方法是分配自定义属性 widthheight,但问题是我使用 JavaScript 动态加载这些图像,所以我没有这些图像的尺寸。我试过检索尺寸,例如参见这个 SO 答案:

Get width height of remote image from url

但这给出了网页加载后显示的缩放尺寸(200x164?)。

我不确定为什么会发生这种情况以及如何使用正确的尺寸加载这些图像。

此外:将其放入 jsfiddle ( link ) 确实似乎使用了正确的尺寸。

编辑:(我正在编辑它以便它可以得到一个凸起)

最佳答案

您可能有一些站点范围的 img css 属性。您可以为所有这些图像标签分配一个像图像加载这样的类,并有一个 css 属性来强制它们对高度和宽度使用自动。

.image-load { height : auto !important; width: auto !important; }

关于javascript - 图片 URL 在页面加载时调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34598338/

相关文章:

javascript - 如何从对象中过滤掉键?

JavaScript:通过从字符串中检索变量名来更新对象值

php - mysql,回显内容时显示文本格式?

javascript - 如何使用 javascript 或 Jquery 保存复制的内容

javascript - 在文本区域中显示复选框的值

php - 如何通过 Adob​​e Muse 生成的 CSS 运行 PHP

jquery - jquery 导航中的按钮冲突

html - table 高度错误

php - 尝试打印 MySQL 查询时出现 AJAX 问题

JavaScript 碰撞检测