如何正确了解网站显示的图片大小(宽高)？
如何正确了解网站显示的图片大小(宽高)？
提问于 2020-09-25 19:23:37
我试图找到我的网站上显示的图像的最大宽度，以便有尽可能最小的图像大小。
首先，使用Lightshot screenshot软件直接测量它(假设我有最大屏幕尺寸)：Screenshot
宽度= 1425px
其次，在Chrome开发工具(ctrl+shift+i)中，我通过检查对象Screenshot发现了这个
宽度= 1140px
我知道第一种方法不是“好”的，但我很惊讶没有找到大致相同的大小。
正确的方法是什么？
回答 4
Stack Overflow用户
发布于 2020-09-25 19:37:25
你可以用开发工具来做这些事情(这就是它们存在的目的; )，你可以做的另一件事是按下mouse icon，你可以直观地看到元素，然后点击它们来查看它们的属性。希望对你有帮助，祝你好运！
Stack Overflow用户
发布于 2020-09-25 19:51:18
你可以使用浏览器的开发工具。或者，您可以使用JavaScript。
<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: " + document.getElementById("id3").height;
document.getElementById("id2").innerHTML = "Width: " + document.getElementById("id3").width;
}
</script>Stack Overflow用户
发布于 2020-09-25 20:02:32
您应该接受Chrome development Tool提供给您的解决方案，因为在收集有关不同elements的信息时，dev tools是最合适的。
如果你想找到图片的max-width，你只需要点击你已经做过的img标签，在左面板的style下面，你会看到你给你的图片的所有max-width，包括max-width属性。
如果您想确认显示图像大小的dev tools是否准确，您可以使用Visbug Chrome Extension，它可以为您提供每个元素的信息，而无需使用开发工具。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64063172
复制相关文章
相似问题
腾讯云开发者
