Question

我试图将img标记的维度发布到php文件，然后我发现检查器指定的维度与Javascript和JQuery函数返回的维度存在差异。

这里我提供的HTML代码只包含必要的材料，而不是整个代码 -

<!doctype html>
 <html>
   <head>
     <style>
        img{
            max-width : 600px;
            max-height: 600px;
        }
     </style>
   </head>
   <body>
     <img id="photo" src="milky_way.jpg">
     <script>   
         document.write(
            "<br/>Dimensions returned by Javascript : <br/>"+
            "Width : "+document.getElementById("photo").width+
            "Height : "+document.getElementById("photo").height
            );
     </script>

   </body>
 </html>

以下是我的结果的截图 -

正如您所看到的，javascript代码返回宽度和高度为 - 分别为600和338 当通过检查员窗口检查尺寸时，它是 - 分别为720和405。

此外，图像的原始尺寸为 - 1920 x 1080 为什么会有这样的差异？

Answer 1

您看到的width / height是您看到的实际值。

如果要获取图像的原始宽度/高度，可以创建一个新的img对象，并从该对象获取值（onload）：

document.write(
  "<br/>Dimensions returned by Javascript : <br/>"+
  " Width : "+document.getElementById("photo").width+
  " Height : "+document.getElementById("photo").height
);
var img = new Image()
img.src = document.getElementById("photo").getAttribute('src')
img.onload = function() {
  document.getElementById('result').innerHTML = "<br/>Original Dimensions : <br/>"+
  " Width : "+this.width+
  " Height : "+this.height
}

img{
            max-width : 600px;
            max-height: 600px;
        }

<img id="photo" src="https://dummyimage.com/1920x1080/000/fff">
<div id="result"></div>

在您的屏幕截图中 - Firefox会显示元素在屏幕上显示的实际宽度/高度（如果您处于缩放/缩放状态，则会将该缩放考虑在内）。例如，这不是Chrome中的行为。 Chrome会忽略缩放效果。

您可以设置默认缩放（使用 CTRL + 0 ）并再次检查。

Answer 2

max-height属性用于设置元素的最大高度。这可以防止height属性的值变得大于max-height。例如，如果您的图片的600px为height，那么如果您设置img max-height:500px，图片会缩小，但如果您设置max-height:700px图片高度为始终600px身高和最高身高不同

检查器窗口中显示的img标记维度与JavaScript之间的差异

2 个答案: