Question

我正在尝试调整<img>代码的大小，以便它始终适合整个屏幕 width 。类似于下面的东西：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>testbed</title>
        <style>
            html, body {
                margin: 0;
                padding: 0;
            }

            #a-container {
                width: 100%;
                background: lime;
            }

            #an-image {
                display: block;
                width: 100%;
                max-width: none !important;
            }
        </style>
    </head>
    <body>
        <div id="a-container">
            <img id="an-image" src="http://.../some-really-big-image.jpg" alt="an image">
        </div>
    </body>
</html>

除了Opera Mini之外，就是这样。其他浏览器没有显示绿色，但Opera Mini对#an-image做了一些奇怪的事情，使#a-container的绿色背景显示在右侧，即使#an-image的宽度从不大于视口的。即使设置max-width: none也无济于事。

如果没有CSS，Opera Mini将缩小#an-image以适应任何方式。

~~似乎Opera Mini在调整图像大小时会在视口中考虑某些填充，即使我已从<html>和<body>中删除它。~~我是在这里遗失什么？更好的是：有没有办法完全覆盖/禁用Opera Mini的图像大小调整行为？

还有一件事：我使用background-image和background-size: contain进行了测试;当工作时，我需要将图片驻留在<img>标记中。

更新：我对此进行了更多的研究，似乎Opera Mini对#an-image所做的上述“奇怪”事情是将图像缩小到95％视口宽度如果大于，同时保持其宽高比。但是，这种行为是否可以被覆盖的问题仍然存在。

如何防止Opera Mini强行缩小“<img/>”？

0 个答案: