Question

我有一个非常大的图像条。 130560 x 1080我想将它加载到图像标记中，并将父div用作视图端口，一次只能看到图像的1个部分。

我遇到的问题是，如果我不指定图像的高度和宽度，则显示图像。但是，如果我指定高度和宽度，例如width = 54442 height = 432，则图像会消失。目的是将其扩展到40％。我尝试通过CSS，属性和Chrome调试器中的交互式更改它，但在任何情况下，任何高度值都会使图像消失。

<html>
    <head>
        <style>
            #imgContainer
            {
                width: 768px;
                height: 432px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="imgContainer">
            <img src="complete.png" id='montage'  height="432px"/>
        </div>
    </body>
</html>

我在较小的jpgs上使用过这种技术，但是还没有在PNG上尝试过这种技术，也没有尝试过这种大小的文件。

对于想要尝试这一点的人来说，这是文件 https://drive.google.com/file/d/0B_sWWl4f5UpESGEtRUdYbklQX0U/view?usp=sharing 警告大小为12MB。

Answer 1

img元素是内联元素，将其CSS样式设置为display: block;或display: inline-block;以使其获得缩放。

您还可以使用width="54442"（不包括px）百分比设置宽度。

<强> Offtopic：

您正在混合使用不同的引号，我建议仅使用＆＃34;在HTML中，保持干净。
大图像需要大量的加载，也许你应该大幅减小它的大小，当然如果这只是一个私人项目并不重要。

图像条不会通过CSS属性进行缩放

1 个答案: