Question

我在Firefox中为我的网站工作时遇到了实际问题，尽管它在IE中完美运行。我希望内容根据视口调整大小。我已经将所有维度设置为％，除了单个图像之外，大多数情况下都可以。我已经阅读了关于它的无尽帖子，尝试了所有非Java脚本并且无法修复它。我现在已经创建了一个非常小的页面，除了用于测试目的的单个图像之外没有任何其他内容。在IE中工作正常，但在Firefox中不行。

这是HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<body>
<head>
<link rel="stylesheet" href="../fart.css" TYPE="text/css" />
<title>resize</title>
</head>
<p><img src="george.JPEG" /></p>
</body>
</html>

这是CSS：

image{
width: 30%;
height: 30%;
max-height: 30%
max-width: 30%;
border:2px solid cyan;
}

Firefox似乎忽略了图像的CSS，并且在更改CSS参数时它保持绝对不变。没有调整大小和没有青色边框。我也尝试了仅使用“max”的各种组合，不使用“max”并同时使用“max-height”和“height”。我还在另一台PC上测试了它，以防Firefox的“about：config”在这台PC上搞砸了。

我是一个业余爱好者，所以请温柔地对待我，但是让一切都在一个浏览器中工作而在另一个浏览器中工作却非常令人沮丧。提前感谢任何可以提供帮助的人。

卡洛斯

// //编辑

我可能在弄乱的时候侥幸找到了理由。看起来Firefox需要CSS标签“img”，而IE接受两者。这对任何人都有意义吗？

所以

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<style type="text/css">
image {border:2px solid cyan;}
</style>
</head>
<body>
<p><image src="george.JPEG" /></p>
</body>
</html>

在Firefox中不起作用，但在IE中起作用，但

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<style type="text/css">
img {border:2px solid cyan;}
</style>
</head>
<body>
<p><image src="george.JPEG" /></p>
</body>
</html>

适用于两者。

卡洛斯

Answer 1

您在css片段中使用IMAGE而不是IMG作为css选择器。

img {
  width: 100%;
  height: 100%;
  max-height: 100%
  max-width: 100%;
  border:2px solid cyan;
}

这是一个大小合适的jsfiddle：http://jsfiddle.net/7UZ9a/

让图像“自动拉伸”以跨浏览器工作非常棘手。我会回到一个为你做繁重工作的图书馆。我经常用后伸来做这件事。例如，我将它用于http://www.hsvbonus.de。您可以在此处下载jquery lib https://github.com/srobbin/jquery-backstretch

调整图像大小以适应各种屏幕

1 个答案: