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

Question

解决方案

@media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
      background: image-url('<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6aba7b686f4bee8acb6a1" rel="noreferrer noopener nofollow">[email protected]</a>');
      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 设置为宽度/高度(以像素为单位)的一半即可。