如何使用背景精灵调整部分图像的大小以始终适合屏幕答案

【问题标题】：How to resize partial image to always fit screen by using background sprite如何使用背景精灵调整部分图像的大小以始终适合屏幕
【发布时间】：2014-09-19 18:53:44
【问题描述】：

我有一个从双屏屏幕截图生成的大图像文件 (3838x1049)，我需要创建 2 个 HTML 文件，每个文件显示图像的一半。

我能够通过使用背景精灵并指定我想要查看的图像部分来实现这一点。

问题在于图像以大于典型显示器分辨率的原始尺寸显示。我需要它自动调整大小以适应屏幕，同时保持纵横比。

谁能帮忙？

这是我当前用于显示图像右侧部分的代码：

<html>
<head>
<style>
img.home {
          width: 1899px;
          height: 1020px;
          background: url(dashboard.jpg) -1930px -1px;
         }
</style>
</head>
<body>

<img class="home" src="img_trans.gif"><br><br>

</body>
</html>

【问题讨论】：

标签： html css background-image sprite

【解决方案1】：

没有足够的声誉来评论这就是为什么我把它放在这里。尝试在主容器中添加这两种样式，然后应用宽度百分比的方法

<style>
imgMainContainer{width:100%;}
</style>

然后将左右图像放在主容器中，每个宽度为 100%。以下是旧答案，所以只考虑上面

尝试在背景高度和宽度中使用百分比而不是像素。

   <html>
    <head>
    <style>
    img.home {
              width: 100%;
              height: 100%;
              background: url(dashboard.jpg) -1930px -1px;
             }
    </style>
    </head>
    <body>

    <img class="home" src="img_trans.gif"><br><br>

    </body>
    </html>

【讨论】：

这似乎不起作用。发生的情况是，如果窗口足够大，可以看到整个图像，它就在那里，但是当我缩小浏览器窗口时，它只会从右侧剪切图像，所以它不会调整大小以适应

【解决方案2】：

CSS

.leftImg{
 background:url('http://upload.wikimedia.org/wikipedia/commons/2/26/Kluft-hoto-Black-Rock-Desert-Aug-2005-Img_5081.jpg');
background-size:200% 100%; 
width:50%;
height:100vh; 
}

.rightImg{
background:url('http://upload.wikimedia.org/wikipedia/commons/2/26/Kluft-photo-Black-Rock-Desert-Aug-2005-Img_5081.jpg');
background-size:200% 100%; 
width:50%;
height:100vh; 
background-position: right top
}

和 HTML

<div class="leftImg"></div>
<div class="rightImg"></div>

试试这个

【讨论】：

谢谢。不幸的是，这似乎产生了同样的问题，但反过来。当我显示正确的图像并调整窗口大小时，它会移动图像但仅移动其中的一部分。左边的部分被剪掉了。为了查看整个图像，我必须将浏览器窗口向左拖动，直到它大到足以显示完整图像。 Dang，我担心后台方法可能是可能的。想知道是否有不同的方法来显示图像的左/右半部分