js 获取div中图片大小

在JavaScript中获取<div>元素内图片的大小可以通过多种方式实现。以下是一些基础概念和相关方法：

基础概念

DOM（文档对象模型）：JavaScript可以通过DOM API来访问和操作HTML文档中的元素。
Image对象：在JavaScript中，Image对象可以用来加载图片，并获取其宽度和高度。

获取图片大小的方法

方法一：直接通过DOM获取

如果你知道图片的ID或者其他选择器，可以直接通过DOM获取图片的大小。

// HTML
<div id="imageContainer">
  <img id="myImage" src="path/to/image.jpg" alt="My Image">
</div>

// JavaScript
var img = document.getElementById('myImage');
console.log('Width:', img.width);
console.log('Height:', img.height);

方法二：使用Image对象预加载

如果你需要确保图片完全加载后再获取其大小，可以使用Image对象进行预加载。

// JavaScript
var img = new Image();
img.onload = function() {
  console.log('Width:', this.width);
  console.log('Height:', this.height);
};
img.src = 'path/to/image.jpg';

方法三：获取实际渲染尺寸

有时候图片的实际渲染尺寸可能与原始尺寸不同，特别是在CSS样式影响下。

// JavaScript
var imgElement = document.getElementById('myImage');
imgElement.onload = function() {
  var width = imgElement.clientWidth;
  var height = imgElement.clientHeight;
  console.log('Rendered Width:', width);
  console.log('Rendered Height:', height);
};

应用场景

响应式设计：根据图片的实际大小调整布局。
性能优化：了解图片大小可以帮助决定是否需要压缩图片以减少加载时间。
动态内容：在用户上传图片后，动态获取并显示图片大小。

可能遇到的问题及解决方法

图片未加载完成：如果图片还未完全加载就尝试获取其大小，可能会得到0或未定义的值。使用onload事件确保图片加载完成后再获取尺寸。
CSS样式影响：CSS样式（如max-width, max-height）可能会影响图片的实际显示尺寸。使用clientWidth和clientHeight获取实际渲染尺寸。

示例代码

以下是一个完整的示例，展示了如何在图片加载完成后获取其大小：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Get Image Size</title>
</head>
<body>
  <div id="imageContainer">
    <img id="myImage" src="path/to/image.jpg" alt="My Image">
  </div>

  <script>
    var imgElement = document.getElementById('myImage');
    imgElement.onload = function() {
      var width = imgElement.clientWidth;
      var height = imgElement.clientHeight;
      console.log('Rendered Width:', width);
      console.log('Rendered Height:', height);
    };
  </script>
</body>
</html>

通过上述方法，你可以有效地获取并处理<div>中图片的大小信息。

页面内容是否对你有帮助？

有帮助

没帮助

jquery在ajax回调中获取图像宽度

如何在ajax回调中获取图片大小？它返回值0。index.php<script type="text/javascript"> } });</script> <

浏览 4提问于2011-09-17得票数 2

回答已采纳

1回答

当浏览器调整大小时，调整div标签中的图像大小

、、

<div id="banner"> <scripttype="text/javascript" src="gallery/js/swfobject.js&q

浏览 1提问于2012-03-27得票数 0

1回答

如何使用angularjs调整图片大小

、、、

大家好，我有很多问题，使我的图片大小可调(当我把我的指针在图片的边缘)使用角度js谁能帮助我，我怎样才能使脚本功能？这是我的HTML...<div class="container"> <div class="col-sm-8 "> <img class="img-responsive" src="assets&

浏览 1提问于2016-06-03得票数 0

1回答

在纯CSS中为元素添加图像背景大小动画效果

为什么在加载时不能添加改变div背景图片大小的动画？我知道使用JS可以通过向主体或元素添加类来实现这一点，但是我们如何在纯CSS中实现这一点呢？ html,body { width:100%; height: 100%; background-imagetransition: all 3s; from {background-size: 100%}

浏览 27提问于2019-03-06得票数 0

回答已采纳

2回答

用CSS裁剪图像的最好方法是什么？

我想在我的页面上展示一张照片，DIV层是500 * 500px。我会经常更换图片，图片大小不确定，可能是横版也可能是竖版，可能是800*600px也可能是576*720px。我不想让照片变形。如何设置CSS或JS，使照片只显示中心500 * 500像素，隐藏周围部分。

浏览 2提问于2010-10-12得票数 4

1回答

android.hardware.Camera.setParameters获取runTime异常(Android)

、、

我正在做一个有相机功能的项目。我一直面临着一个与表面视图有关的问题。首先，我根据本文实现了：。但这也有一些缺点:它以拉伸的纵横比捕捉图像。我创建了一个CustomView，它实现了SurfaceHolder.Callback来使用mSupportedPreviewSizes = mCamera.getParameters().getSupportedPreviewSizes();计算宿主视图的宽度和高度，但是现在android.hardware.Camera.setParameters得到了我。 public class Preview extends ViewGroup imp

浏览 3提问于2015-11-04得票数 1

回答已采纳

2回答

导致Camera.takePicture()失败的图片大小

、

摘要:对于某些图片大小，显式地将相机图片大小设置为受支持的大小会导致在调用Camera.takePicture()之后不调用回调。它遵循照相机类文档中描述的指导方针，并在各种设备上可靠地工作。在调用Camera.open()之后，应用程序调用camera.getParameters()来获取Camera.Parameters对象，然后调用该对象的getSupportedPictureSizes在此设备上报告的受支持图片大小之一是1184x1184。如果设置此图片大小，然后调用camera

浏览 8提问于2015-05-14得票数 4

1回答

未正确加载媒体查询

、、、

通过一些互联网帮助，我将我的移动css内容放在一个带有媒体查询和响应js的css文件中，差一点就解决了这个问题。这种方法产生了两个问题。在移动网站上，媒体查询下的移动css加载不正确。在IE8网站上，除了顶部的视频没有显示，以及另一个网站的宽度和图片大小混乱之外，大多数情况下看起来都还可以。有什么建议吗？谢谢!下面是一些相关代码的片段 <script src="//cdn.optimizely.co

浏览 0提问于2013-07-12得票数 1

3回答

我如何才能使一个图像完美地适合div呢？

、

spotlight中的图像应该完美地适合正方形，并显示从左到右的所有像素。基本上，我想让它根据屏幕大小来调整大小。我看遍了整个网络，似乎什么都不起作用。

浏览 1提问于2012-08-18得票数 0

回答已采纳

4回答

Prettyphoto更改灯箱的高度和宽度

、、

我正在尝试修改当我单击缩略图时打开的图像框的高度和宽度，但没有成功。@for (int i = 0; i < Model.count; i++) <a href= "@Url.Action("GetImage", "Image", new { id = i })" rel="prettyPhoto[pp_gal]"> <img src= "@Url.Action("GetImage", "Image", new { id

浏览 0提问于2012-01-31得票数 1

回答已采纳

1回答

Facebook共享者，分享图片

、

另一个问题是，当我单击共享时，页面中的所有图像都可以共享。我如何修复它，以便只有我想要共享的图像才可供共享？function WP_fb_sharer($post) { $link = js_escape(get_permalink($post->ID));href="http://www.facebook.com/sharer.php">Share</a><script src="htt

浏览 0提问于2011-02-05得票数 0

回答已采纳

2回答

背景尺寸封面不起作用

、、

我的PNG图片大小是1000 by乘1000 by。我将它用作DIV中的背景图像，DIV的高度为550 of，并具有background-size: cover属性。我的照片没有缩小到DIV的大小。有什么问题吗？

浏览 3提问于2016-04-10得票数 1

回答已采纳

1回答

根据.load()中的宽度获取图像高度

、

在加载图像本身之前，我需要获取图像的高度和宽度。因此，我使用jquery .load()方法。假设图片大小为400*417，我需要的是200而不是400的高度。我正在寻找js/jquery/angualrjs。请帮帮忙。 (预先谢谢:)

浏览 4提问于2015-05-28得票数 0

回答已采纳

2回答

卷积图像大小

有人知道我可以在我的Volusion模板中的什么位置为要在类别页面上显示的产品设置确切的大小吗？

浏览 7提问于2014-08-12得票数 0

1回答

在html中加载之前获取高度和宽度图像

、、、

我想知道图片在div中是如何缩放的，根据原始图片大小和div size.for示例图像大小为400*1120，div大小为500*800。在这种情况下，加载该div.this后的图像大小是多少：position: absolute; top: 50%; transform: translate

浏览 0提问于2015-07-12得票数 1

1回答

无法使用js将文件值发送到asp.net mvc中的控制器

、、、、

我无法通过js将文件输入的内容发送到控制器，我正在使用'croppie‘插件在提交之前重新缩放图片大小。在使用这个js插件之前，我可以提交文件并保存它，但是现在，我可以提交模型中的所有值，但不能提交文件。我对js不在行，请帮帮我。="Select an image" /> <input type

浏览 10提问于2020-01-24得票数 1

回答已采纳

1回答

Nexus 7摄像机预览尺寸:不能改变高宽比

、、、

我有一个SurfaceView，可以在我的安卓应用程序中显示实时摄像头预览图像。SurfaceView覆盖纵向屏幕的整个宽度，以及屏幕高度的一部分。我测量了屏幕像素和计算出的x和y平方的大小，这应该与上面的调试日志中预测的纵横比误差相同。实际上，我输入了代码等待10秒，并从摄像机中读取预览大小，这是我设置的，但显示没有反映出这一点。无论我设置了什么预览大小，显示总是最优的。在Nexus 7上预览尺寸有什么奇怪之处吗？

浏览 2提问于2014-12-04得票数 3

2回答

android摄像头的预览大小和图片大小有什么不同

、、

在使用摄像头的应用程序中，我需要显示摄像头的预览，我可以通过获取所有支持的预览大小来设置预览大小，并找到最佳的预览大小。我是否也应该为相机设置最佳图片大小？如果有，预览大小和图片大小有什么不同？desiredHeight); selectedPair = sizePair; }使用此方法会在某些手机中显示错误的预览大小

浏览 0提问于2017-02-08得票数 5

2回答