Question

道歉，如果这很明显，我不是CSS专家。

当您将图像直接拖放到任何浏览器上的Web浏览器上时，它们都会实现某种“缩小以适应”功能。示例是此视频显示缩小以适应Firefox的操作：

我希望在我的应用程序中实现视频中显示的内容，并使其在最大程度上跨浏览器工作。

有办法做到这一点吗？网上的各种文档涵盖了有关缩小以适应的某种讨论，但似乎没有人讨论如何以一致的方式跨浏览器实现此图像。

我已经看过浏览器上的代码，当图像被删除时，他们似乎都采取了不同的方法。

@slaks我刚刚在Chrome上尝试了你的建议，但它没有用。这是我试过的代码：

<html>
<head>

</head>

<body>
<style>

 img {
    width: auto;
height: auto;
max-width: 100%
max-height: 100%
    }
</style>

<img src="whn-data/image.png">

</body>
</html>
</head>

Answer 1

您正在寻找background-size: contain （假设图像是background-image）

对于<img>标记，请使用

width: auto;
height: auto;
max-width: 100%
max-height: 100%

Answer 2

此代码似乎有效：

 img {
            margin: auto;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            max-height:100%;
            max-width: 100%;
        }

JSFiddle

边距：添加自动以保持图像居中（水平和垂直）。

最大高度和最大宽度限制图像比屏幕更大。

但这种技术有一个缺点：图像的默认大小必须大于浏览器窗口或容器所在的高度/宽度。如果不是，则会显示边距所有方面都要保留图片的默认尺寸。

Answer 3

我认为在这些情况下浏览器实现的是属性zooom。

Answer 4

我把它弄清楚了。对不起，我花了一段时间。这实际上很明显。

使用此：

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
div {  
    height: 100%;
}

img {
max-width: 100%;
max-height: 100%;
}

JSFIDDLE HERE

是否有跨浏览器方式使图像缩小以适应？

4 个答案: