Question

我的网站显示的图片大于原始尺寸。图像比使用photoshop（例如）创建的原始图像大20％，如果图像的宽度为200px，则浏览器显示为240px。

所以我的所有图像都是模糊的。

你知道为什么吗？

Answer 1

以下是我的代码的一部分：

首先在head标签中我有这个meta标签：

<img src="/path-to-image-folder-ebook-cover.jpg">

我的css没有任何缩放或类似，我的HTML是这样的：

#include <iostream>
using namespace std;

int sumDigits(int n)
{
    int tmp = 0;
    while(n>0) {
        tmp+=n%10;
        n/=10;
    }
    return tmp;
}

int main()
{
    cout<<sumDigits(12745);
    return 0;
}

这张图片的宽度是250px，在Photoshop中它看起来很完美，但在浏览器中（chrome或firefox是相同的）它看起来更大和模糊，但是，如果我将浏览器缩小到80％，图像是完美

Answer 2

我找到了解决方案！

Windows 10的默认设置dpi设置为125％（搜索dpi进入搜索框，然后查看＆＃34;更新文本应用和其他元素＆＃34;），这会增加我的显示器中所有内容的尺寸，所以进入我网站的图像大了25％。

我可以采取哪些措施来防止在我的网站上出现此行为并继续使用默认的Windows设置dpi？

Answer 3

我有一个类似的问题，但由于其他原因。我正在设置

width: 100%;
height: 100%;

而且图像越来越大。

我删除了宽度：100％（仅设置高度：100％），图像现在具有原始大小。

请注意，图像将不响应。您可以使用以下方法限制图像大小并继续获得响应图像：https://stackoverflow.com/a/14390145/8477340

浏览器显示大于原始大小的图像

3 个答案: