Question

我有一个从双屏截图生成的大图像文件（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>

Answer 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>

Answer 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>

试试这个

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

2 个答案: