尝试

Question

浏览器：Chrome（以100％显示）桌面显示器：4K

显示Jpeg时，浏览器显示的大小约为应有大小的两倍。就像放大了一样。以下是HTML代码和样式表：

<!DOCTYPE html>
<html>
    <head>
        <title>
            Testing
        </title>
        <link rel="stylesheet" type="text/css" href="css/styles.css">
    </head>
    <body>
        <img src="images/Home.jpg" width="3840" height="2560">
    </body>
</html>

body{
margin: 0;
}

Answer 1

尝试

<!DOCTYPE html>
<html>
    <head>
        <title>
            Testing
        </title>
        <link rel="stylesheet" type="text/css" href="css/styles.css">
        <style>
            .body_img{
                width: 100%;
            }
        </style>
    </head>
    <body>
        <img src="images/Home.jpg" class="body_img">
    </body>
</html>

Answer 2

width和height属性以像素为单位指定图像的宽度和高度。参见https://www.w3schools.com/tags/att_img_width.asp

如果未设置尺寸，则在图像中设置时，浏览器将按DPI显示图像。大小属性可以其他单位设置，即。 pt，mm，cm，in和％（百分比）。 100％也许是一个不错的选择。

以像素为单位的图像的实际大小是多少？在图像中设置了什么DPI？

如果图像设置了300 DPI，则在未设置大小属性的情况下，它会显示为缩小尺寸。

显示Jpeg时，浏览器显示的大小约为应有大小的两倍

2 个答案:

尝试