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设置为宽度/高度的一半（以像素为单位）。

将背景图像置于其原始宽度和高度的50％处居中

1 个答案: