さて、ここで問題です。Photoshop でウェブサイトのモックアップをデザインしています (72dpi に設定)。
幅と高さが 295px x 129px の logo.png ファイルをエクスポートします。
ブラウザー (Chrome または Firefox) で直接 logo.png ファイルにアクセスすると、画像が 25% 大きく表示されます。スクリーンショットを撮り、それらを並べて比較することで、これを確認します。
何が問題なのかと思っていたら、Windows 8 のコントロール パネル (外観と解像度 -> ディスプレイ) で、[すべてのアイテムのサイズを変更する] が [大きい - 150% (デフォルト)] に設定されていることに気付きました。私は2つの4kモニターを使用しています。
この値を 125% に変更して Windows ユーザーに再度ログインすると、すべてがかなり小さく表示されます (不快なほど小さくなります) が、ブラウザーでは画像が正しいサイズで表示されるようになりました。
だから私の質問はこれです..
ブラウザが画像コンテンツのサイズを変更しないようにする方法はありますか? 明らかな理由から、width:75% を指定してハッキングしないことをお勧めします (OS アイテムのスケールが 100% の場合は、さらに小さく表示されます)。