gpt4 book ai didi

html - 有没有一种跨浏览器的方法可以使图像缩小以适合?

转载 作者:太空宇宙 更新时间:2023-11-04 03:28:43 25 4
gpt4 key购买 nike

抱歉,如果这很明显,我不是 CSS 专家。

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

http://youtu.be/1LW-eByYXik

我想在我的应用程序中实现视频中显示的内容,并使其尽可能跨浏览器工作。

有没有办法做到这一点?网络上的各种文档涵盖了某种关于缩小以适合的讨论,但似乎没有一个讨论如何以一致的方式跨浏览器为图像实现这一点。

当图像被拖放到浏览器上时,我查看了浏览器上的代码,它们似乎都采用了不同的方法。

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

最佳答案

此代码似乎有效:

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

JSFiddle

边距:添加自动以保持图像居中(水平和垂直)。

max-height 和 max-width 限制图像不超过屏幕。

但这种技术有一个缺点:图像的默认大小必须大于浏览器窗口或容器所在的容器的高度/宽度。如果不是这样,边距将出现在所有边都保持图像的默认尺寸。

关于html - 有没有一种跨浏览器的方法可以使图像缩小以适合?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26662050/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com