blocks|key|2691424|text|如果您正在尝试动态调整表中一行中的几个div的大小，那么使用html表并将每个图像放在td标记中可能会更好。这将使tr标签为每个单元格中的图像相应地调整大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2691425|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If you are trying to dynamically resize a couple of divs in a row within a table, you maybe better off using a html table instead and having each image within a td tag. This will make tr tag resize accordingly for the image in each cell.

blocks|key|1961387|text|++this.img+=+new+Image();
++this.img.src+=+url;
++alert(this.img.width);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1961388|给出宽度，而|unstyled|1961389|++var+img+=+new+Image();
++img.src+=+url;
++alert(img.width);|1961390|不会..|1961391|不知道为什么。|1961392|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|F|7|T|8|@]|9|@]|A|$]]]|N|$]]

<pre><code> this.img = new Image();
 this.img.src = url;
 alert(this.img.width);
</code></pre>

gives the width while

<pre><code> var img = new Image();
 img.src = url;
 alert(img.width);
</code></pre>

doesnt..

dunno why.

blocks|key|2691327|text|您可以：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2691328|不指定div的高度，让它展开automatically|2691329|Once+|unordered-list-item|2691330|+is+|ordered-list-item|2691331|+do：|2691332|2691333|2691334|document.getElementById("myImage").height+=+document.getElementById("myDiv").height|2691335|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|I|7|V|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|X|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|Y|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|Q|$]]

You can:

<ol>
<li>Not specify the height of the div, and let it expand automatically</li>
<li>Once the image is loaded do:

document.getElementById("myDiv").height = document.getElementById("myImage").height</li>
</ol>

blocks|key|4804405|text|将它们预先加载到javascript图像对象中，然后引用高度和宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4804406|可能需要一些聪明的技巧才能在所有浏览器中工作。|4804407|function+getSize(imgSrc){

++++var+aImg+=+new+Image();

++++aImg.src+=+imgSrc;

++++aHeight+=+newImg.height;
++++aWidth+=+newImg.width;

}|code-block|syntax|javascript|4804408|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Pre-load them into javascript image objects then just reference the height and width.

Might take some clever devilry to work in all browsers...

<pre><code>function getSize(imgSrc){

 var aImg = new Image();

 aImg.src = imgSrc;

 aHeight = newImg.height;
 aWidth = newImg.width;

}
</code></pre>

blocks|key|55188|text|我们需要更多的信息才能变得非常有用。你可以在页面加载后通过Javascript+(info)获得图片的高度和宽度，然后你可以在加载后调整div的高度。否则，您就真的不走运了，因为HTML本身没有任何东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|55189|如果您正在使用PHP，则可以使用getimagesize()，如果您正在使用PHP动态构建站点。其他语言也有类似的函数，但我们需要更多的信息。|55190|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/htmldom/dom_obj_image.asp|1|http://us3.php.net/manual/en/function.getimagesize.php^0|15|4|0|0|G|E|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

We'll need a little more info to be very useful. You can get the height &amp; width of an image after the page loads via Javascript (<a href="http://www.w3schools.com/htmldom/dom_obj_image.asp" rel="nofollow noreferrer">info</a>), then you could resize the height of the div after loading. Otherwise, you're really out of luck since HTML itself doesn't have anything.

If you're using PHP, there's <a href="http://us3.php.net/manual/en/function.getimagesize.php" rel="nofollow noreferrer">getimagesize()</a>, which you can use if you're building the site dynamically with PHP. There are similar functions for other languages, but we'd need a little more info.

blocks|key|2691476|text|如果您希望浏览器在获取图像之前根据图像的高度进行布局，则需要将该高度发送到浏览器的某个位置。这将需要一些服务器端的东西。最快的方法是直接插入到html中。更慢但更优雅的方法是使用语句逐个图像地获取它，这些语句从一个特殊的javascript生成cgi中获取指令。(速度差异来自网络往返。)</div><div>如果你愿意在数据到达后调整大小，那就简单多了。要么在图像上添加一个onload处理程序，要么将它们粘贴到普通的dom中(例如，一个实际的表格，尽管你可以用div和css来做这件事)，然后让布局引擎来完成这项工作。</div><div></div>|type|unstyled|depth|inlineStyleRanges|entityRanges|data|entityMap^0^^$0|@$1|2|3|4|5|6|7|C|8|@]|9|@]|A|$]]]|B|$]]

If you want the browser to do layout based on the height of an image, before it fetches the image, you need to send that height to the browser somewhere. This will require something server-side. The fastest thing would be to insert in into the html directly. Slower but more elegant would be to fetch it image by image with &lt;script src=&gt; statements that get instructions from a special bit of javascript-generating cgi. (The speed difference comes from network round trips.)

If you're willing to resize after the data arrives, it's much simpler. Either slap an onload handler on the images or stick them in normal dom (e.g. an actual table, though you can do it with divs and css) and let the layout engine do the work.

blocks|key|55884|text|这个问题已经以多种方式得到了回答，您还提出了另外一个问题：“这不会让UI看起来很糟糕吗？”|type|unstyled|depth|inlineStyleRanges|entityRanges|data|55885|这个问题的答案是肯定的。在大多数情况下，最好的做法是将div的高度设置为看起来很好的高度，然后缩小图像以适应需要。这将使渲染速度更快，最终产品将看起来更好和更专业。|55886|但这只是我自己的观点。我没有经验数据来支持这一点。|55887|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

This question has been answered in multiple ways, and you asked the additional question "Won't this make the UI look bad?"

The answer to that question is Yes. The best thing for you to do in most cases will be to set the height of your div to something that looks good, then scale the images down to fit. This will make the rendering faster, and the final product will look better and more professional.

But that's just my own opinion, though. I have no empirical data to back that up.

I have a table that is dynamically created using DIVs. Each row of the table has two images. I want to set the height for the div (that represents a particular row) to the height of image that is greater of the two images being displayed in that particular row. The images to displayed will always change, and they are from an external server.

How do I set the height for my div so that I can fit images?

Getting Image height before the image loads in HTML

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个使用DIVs动态创建的表。表的每一行都有两个图像。我希望将div (表示特定行)的高度设置为该特定行中显示的两个图像中较大的图像的高度。要显示的图像将始终更改，并且它们来自外部服务器。我如何设置我的div的高度，以便我可以适应图像？

问在HTML中加载图像之前获取图像高度
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML中加载图像之前获取图像高度EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML中加载图像之前获取图像高度
EN