以原始宽度和高度的 50% 居中背景图像

Question

解决方案

@media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
      background: image-url('map@2x.jpg');
      background-size: $lowDPIImageWidth $lowDPIImageHeight;
      background-position: center center; // Note that I had to reapply background-position again
} 

问题

我有一个带有背景图像的 div：

background: image-url('map.jpg');
background-position: center center;
background-repeat: no-repeat;

当我调整 div 的大小时，我可以确定背景图像的中心位于 div 的中心，并且图像不会缩放。它被 div 有效地裁剪。

如果客户端的屏幕是 hdpi，我正在使用媒体查询将此图像换成双维之一。

问题在于，图像不会占用与原始图像相同的区域以双倍分辨率，而是扩展到其完整尺寸，因此它的大小实际上翻了一番。这是有道理的，因为它 是大小的两倍。

如何在保持居中的同时以与原始图像相同的尺寸显示图像？

似乎将background-size 设置为50%：

background-size: 50% auto;

没有达到我的目标。

Answer 1

您是否尝试过指定确切的像素？将其设置为 50% 会将其设置为 div 宽度的 50%。如果您已经知道图像的确切尺寸，但希望将其缩放 50%，那么只需将 background-size 设置为宽度/高度的一半（以像素为单位）。