entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://i.stack.imgur.com/uDBRQ.png|blocks|key|fufm7|text|你可以用开发工具来做这些事情(这就是它们存在的目的;+)，你可以做的另一件事是按下mouse+icon，你可以直观地看到元素，然后点击它们来查看它们的属性。希望对你有帮助，祝你好运！|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|bae4j^0|15|A|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|L|G|@]|H|@$I|M|J|N|A|O]]|6|$]]|$A|K|C|-4|2|E|F|P|G|@]|H|@]|6|$]]]]

<p>You do this kindo of stuff with the dev tools (that's what they are there for ;) ), one more thing you can do is press on the <a href="https://i.stack.imgur.com/uDBRQ.png" rel="nofollow noreferrer">mouse icon</a> you can visually see elements and click on them to see their properties.
Hope it helped, Good Luck!</p>


entityMap|blocks|key|8mq8n|text|你可以使用浏览器的开发工具。或者，您可以使用JavaScript。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|e9ncn|<button+onclick="function1()">Show+Width</button>
<h1+id="id1">Height:</h1>
<h1+id="id2">Width:</h1>
<img+id="id3"+src="img1.jpg">

<script>
++++function+function1+()
++++{
++++++++document.getElementById("id1").innerHTML+=+"Height:+"+%2B+document.getElementById("id3").height;
++++++++document.getElementById("id2").innerHTML+=+"Width:+"+%2B+document.getElementById("id3").width;
++++}
</script>|code-block|syntax|javascript|ap0if^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|J|9|@]|A|@]|B|$F|G]]|$2|H|4|-4|6|7|8|K|9|@]|A|@]|B|$]]]]

<p>You can use dev tools of browser. Or you can use JavaScript.</p>
<pre><code>&lt;button onclick=&quot;function1()&quot;&gt;Show Width&lt;/button&gt;
&lt;h1 id=&quot;id1&quot;&gt;Height:&lt;/h1&gt;
&lt;h1 id=&quot;id2&quot;&gt;Width:&lt;/h1&gt;
&lt;img id=&quot;id3&quot; src=&quot;img1.jpg&quot;&gt;

&lt;script&gt;
    function function1 ()
    {
        document.getElementById(&quot;id1&quot;).innerHTML = &quot;Height: &quot; + document.getElementById(&quot;id3&quot;).height;
        document.getElementById(&quot;id2&quot;).innerHTML = &quot;Width: &quot; + document.getElementById(&quot;id3&quot;).width;
    }
&lt;/script&gt;
</code></pre>


entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/051ad5ac657daa822d974e9df3e962b9.jpeg|imageAlt|1|LINK|MUTABLE|url|https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en|blocks|key|2h65j|text|您应该接受Chrome+development+Tool提供给您的解决方案，因为在收集有关不同elements的信息时，dev+tools是最合适的。|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|ediga|如果你想找到图片的max-width，你只需要点击你已经做过的img标签，在左面板的style下面，你会看到你给你的图片的所有max-width，包括max-width属性。|9fh94|​|dv16o|?|atomic|qqrg|c78uk|如果您想确认显示图像大小的dev+tools是否准确，您可以使用Visbug+Chrome+Extension，它可以为您提供每个元素的信息，而无需使用开发工具。|6jmnr^0|5|N|1B|8|1O|9|0|9|9|V|3|16|5|1R|9|23|9|0|0|0|1|0|0|0|D|9|W|N|1|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]|A|$2|B|4|C|6|$D|E]]]|F|@$G|H|I|J|2|K|L|13|M|@$N|14|O|15|P|Q]|$N|16|O|17|P|Q]|$N|18|O|19|P|Q]]|R|@]|6|$]]|$G|S|I|T|2|K|L|1A|M|@$N|1B|O|1C|P|Q]|$N|1D|O|1E|P|Q]|$N|1F|O|1G|P|Q]|$N|1H|O|1I|P|Q]|$N|1J|O|1K|P|Q]]|R|@]|6|$]]|$G|U|I|V|2|K|L|1L|M|@]|R|@]|6|$]]|$G|W|I|X|2|Y|L|1M|M|@]|R|@$N|1N|O|1O|G|1P]]|6|$]]|$G|Z|I|V|2|K|L|1Q|M|@]|R|@]|6|$]]|$G|10|I|11|2|K|L|1R|M|@$N|1S|O|1T|P|Q]]|R|@$N|1U|O|1V|G|1W]]|6|$]]|$G|12|I|-4|2|K|L|1X|M|@]|R|@]|6|$]]]]

<p>You should be accepting the resolution that <code>Chrome development Tool</code> is giving to you because <code>dev tools</code> are the most approprate when it comes to gather the information about different <code>elements</code>.</p>
<p>If you want to find out the image <code>max-width</code> you just need to click to that <code>img</code> tag that you already did and on left panel under <code>style</code> you will see all the css that you have given to your image, including the <code>max-width</code> property.</p>
<p><a href="https://i.stack.imgur.com/ayxb5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ayxb5.jpg" alt="enter image description here" /></a></p>
<p>If you want confirm that <code>dev tools</code> showing the image size is accurate or not you can use the <a href="https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en" rel="nofollow noreferrer">Visbug Chrome Extension</a> that gives you information of each element without working with dev tools.</p>


entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/7f7c4a677f6f948a0812b6d33cfcaa35.png|imageAlt|blocks|key|fo7d4|text|终于找到它的来源了。在windows中，默认情况下，文本和界面的缩放比例为125%25。|unstyled|depth|inlineStyleRanges|entityRanges|65q5p|?|atomic|offset|length|3mndl|​|5gjl2^0|0|0|1|0|0|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]]|A|@$B|C|D|E|2|F|G|R|H|@]|I|@]|6|$]]|$B|J|D|K|2|L|G|S|H|@]|I|@$M|T|N|U|B|V]]|6|$]]|$B|O|D|P|2|F|G|W|H|@]|I|@]|6|$]]|$B|Q|D|-4|2|F|G|X|H|@]|I|@]|6|$]]]]

<p>Finally found where it comes from.
In windows, by default, you have a scaling by 125% of text and interface.<a href="https://i.stack.imgur.com/FAif4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FAif4.png" alt="enter image description here" /></a></p>


<p>I tried to find the image max-width displayed on my website, in order to have the lowest size image possible.</p>
<p>First, measured it directly with Lightshot screenshot software (assuming I have the max screen size):
<a href="https://i.stack.imgur.com/f8imX.png" rel="nofollow noreferrer">Screenshot</a></p>
<p>width = 1425px</p>
<p>Secondly, in Chrome development tool (ctrl+shift+i) I found this by inspecting the object:
<a href="https://i.stack.imgur.com/onI2m.png" rel="nofollow noreferrer">Screenshot</a></p>
<p>width = 1140px</p>
<p>I know the first method is not &quot;good&quot; but I was surprised to not finding approximately the same size.</p>
<p>What is the proper method?</p>


How to properly know the displayed image size (width-height) on a website?

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

 我试图找到我的网站上显示的图像的最大宽度，以便有尽可能最小的图像大小。 首先，使用Lightshot screenshot软件直接测量它(假设我有最大屏幕尺寸)：Screenshot 宽度= 1425px 其次，在Chrome开发工具(ctrl+shift+i)中，我通过检查对象Screenshot发现了这个 宽度=...

问如何正确了解网站显示的图片大小(宽高)？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确了解网站显示的图片大小(宽高)？EN