将背景图像以其原始宽度和高度的 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宽度/高度（以像素为单位）设置为一半即可。