gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 11:50:51 26 4
gpt4 key购买 nike

虽然它在 IE 中完美运行,但我在 Firefox 中为我的站点工作时遇到了真正的问题。我希望内容根据视口(viewport)调整大小。我已将所有尺寸设置为 % 并且大多数情况下都可以,除了单个图像。我已经阅读了无数关于它的帖子,尝试了所有非 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>

两者都适用。

卡洛斯

最佳答案

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

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

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

让图像的“自动拉伸(stretch)”跨浏览器工作是非常棘手的。我会回到为您完成繁重工作的图书馆。我经常使用后伸来做到这一点。我用它来 http://www.hsvbonus.de例如。您可以在此处下载 jquery 库 https://github.com/srobbin/jquery-backstretch

关于css - 调整图像大小以适应各种屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20319072/

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