获取图像的原生宽度 | CSS-Tricks

如果你使用 jQuery 选择一个图像，然后使用 .width()，你将获得图像的当前宽度，即使它已经被缩放（例如 max-width: 100%;）。你可以通过以下方法访问图像的原生宽度（即使它没有任何声明其宽度的属性）

// Get on screen image
var screenImage = $("#image");

// Create new offscreen image to test
var theImage = new Image();
theImage.src = screenImage.attr("src");

// Get accurate measurements from that.
var imageWidth = theImage.width;
var imageHeight = theImage.height;

Hans Kuijpers

# 2011 年 10 月 15 日

嗨，Chris,

当我查看代码时，我不理解两件事
1. 为什么你不使用第一个创建的变量 screenImage 在脚本中进一步使用？
2. mainScreenshot 来自哪里？

（我正在尝试学习一些 jQuery）

Chris Coyier

评论永久链接# 2011 年 10 月 15 日

我刚刚有点搞砸了，现在变量引用是正确的。

Saeed Neamati

# 2011 年 10 月 16 日

非常微妙，Chris。这是一个对 JavaScript 原生对象的绝佳用法。我认为它可以简单地成为一个 jQuery 插件，例如


$('#image-id').realWidth();

Richard

# 2011 年 10 月 27 日

我发现 Chrome/FF 在处理自定义轮播时，图像具有额外的属性。以下是我编写的使用这些属性（如果存在）并设置它们（如果不存在）的小函数。一个很大的假设（与原始示例一样）是大小可以立即获得。从技术上讲，在没有“natural(width|height)”的浏览器上使用一个单独的函数，在需要之前填充该值会更“安全”。

function imgRealSize(img) {
	var $img = $(img);
	if ($img.prop('naturalWidth') == undefined) {
		var $tmpImg = $('<img/>').attr('src', $img.attr('src'));
		$img.prop('naturalWidth', $tmpImg[0].width);
		$img.prop('naturalHeight', $tmpImg[0].height);
	}
	return { 'width': $img.prop('naturalWidth'), 'height': $img.prop('naturalHeight') }
}

Kwadwo

# 2011 年 11 月 10 日

嗨，Chris,
感谢你的帮助。我发现“RevealingPhotoSlider”非常有趣，但是，它与 Chrome 不兼容。在 Chrome 中，点击“更多信息”时，图像不会显示，而是缩小了。IE8 中也是如此。我正在创建我的网站，所以没有“实时”链接，因此无法提供网址，抱歉，我希望尽快收到你的回复。

谢谢。

Graham

# 2012 年 12 月 10 日

我发现这仅在 Chrome 中的 $(window).load 中有效——$(document).ready 似乎触发得太早。

Savec

评论永久链接# 2015 年 12 月 23 日

Graham，你救了我！

clemi

# 2013 年 1 月 28 日

@Graham：只有图像在计算之前必须加载，你可以使用 $(‘#image’).load
在我测试过的所有浏览器中都有效，包括移动设备

非常感谢，Chris

Ravi

# 2013 年 10 月 13 日

返回的原生高度和宽度为零。

Liam Monticelli

# 2013 年 10 月 21 日

肯定会有我们需要获取尚未加载的图像尺寸的情况，例如隐藏层中的图像。以下是我针对这种情况提出的解决方法

  $(imgs).each(function(){

    // Create new offscreen image to test
    var theImage = new Image();
    theImage.src = $(this).attr("src");
    // Add a reference to the original.
    $(theImage).data("original",this);

    // Get accurate measurements from that.
    $(theImage).load(function(){
      var imageWidth = this.width;
      var imageHeight = this.height;
      $($($(this).data("original")).css("width",imageWidth+"px");
    });
  });

其中 imgs 是一个 <img> 元素集合。

Adam

# 2013 年 11 月 11 日

在 Firefox 和 IE 上获取原生宽度时存在问题

有没有办法解决这个问题？

sssss sasad

评论永久链接# 2015 年 8 月 27 日

ssssa dsadsad
sssss sasad

评论永久链接# 2015 年 8 月 27 日

asd aasd asd

Tharaka

# 2013 年 12 月 10 日

如果图像已缓存（例如，使用 IIS 7.5 中的输出缓存），则上述方法在 iPhone 5+ 上不起作用。

Jens

# 2014 年 1 月 24 日

好主意，但不起作用……以下脚本适合我。

jQuery.fn.realSize = function() {

var i = $(this.filter( 'img')).first();

if( i) {

    if( !i.data( 'realSize')) {

        var _w = i.width(),
            _h = i.height();

        i.width( 'auto').height( 'auto');

        i.data( 'realSize', { width: i.width(),
                              height: i.height()});

        i.width( _w).height( _h);


    }

    return i.data( 'realSize');

}

return undefined;

};

jQuery.fn.realWidth = function( options) {

var rs = this.realSize();

return rs ? rs.width : undefined;

};

jQuery.fn.realHeight = function( options) {

var rs = this.realSize();

return rs ? rs.height : undefined;

};

$( ‘img’).realSize(); // 对象 {width: 960, height: 720}

angel

# 2014 年 2 月 3 日

Jens 你的解决方案对我来说效果很好；)
我在 jQuery JavaScript 库 v2.1.0 上添加了这个

完美，谢谢你，伙计

jamie

# 2014 年 3 月 19 日

这正是我今天需要的！谢谢——即使过了几年，它仍然有用 :)

Ian

# 2014 年 3 月 27 日

Chris / 全部
有没有办法做到像这样？

img width:100%;
img max-width:NATURAL;

所以我不想让图像变得像素化，但如果它足够大，则变为 100%。

slomo

评论永久链接# 2014 年 6 月 26 日
Ian，这应该很简单
```
img {
    width: auto;
    max-width: 100%;
}
```

jens

# 2014 年 3 月 27 日

嘿，Chris,

我认为以下代码可以解决你的问题。

$( ‘img’).css( ‘max-width’: $( ‘img’).realSize().width);

Ian

# 2014 年 3 月 27 日

jQuery 很好，但我正在寻找一个仅限 CSS 的答案。似乎很奇怪，你无法指定自然图像宽度，除非你完全省略 CSS 宽度。

Kenyon

# 2014 年 4 月 24 日

这对本地图像来说效果很好，但当使用 CDN 上的图像时，它似乎只在首次加载时获取大小，如果你在 window.resize 上调用该函数，该函数将返回 0。

这是一个 jsFiddle：http://jsfiddle.net/WKzJ4/2/

有什么解决方法吗？

Brian

评论永久链接# 2014 年 8 月 13 日

Kenyon,

你有没有找到在 CDN 上找到图像自然大小的解决方案？感谢你的帮助。

Jens

# 2014 年 4 月 24 日

嘿，Kenyon,

我不确定你想做什么。这段代码的意义是确定图像的原始大小。

顺便说一下：使用“new Image()”获取图像的原始大小效果并不理想。

Mark Stickling

# 2014 年 12 月 2 日

在 iOS 8 中
还有其他人发现这段代码返回
高度作为宽度
以及宽度作为高度
当你使用相机拍摄竖屏照片时？

我猜拍摄的照片此时没有旋转，或者类似的情况。但是当图像加载到屏幕上时，它是正确的方向。我感到困惑。

Pavel

# 2015 年 1 月 23 日

你需要等待图像加载
类似这样

var img = new Image();
img.onload = function() {
  console.log(this.width + 'x' + this.height);
};
img.src = /whatever you need/

Mark Stickling

评论永久链接# 2015 年 1 月 23 日

谢谢，我会试试。

Andreas Böhrnsen

# 2015 年 11 月 27 日

效果很棒！谢谢。

评论

发表回复 取消回复

发表回复取消回复