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

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

css

Css 调整图像大小以适应各种屏幕,css,Css,我在Firefox中的网站上很难使用它，尽管它在IE中工作得很好。我想根据视口的大小调整内容的大小。我已经将所有维度设置为%，除了单个图像外，大多数情况下都是可以的。我读了无数关于它的帖子，尝试了所有非Java脚本的，但无法修复它。我现在创建了一个非常小的页面，除了一个用于测试的图像外，没有其他内容。在IE中可以正常工作，但在Firefox中不行以下是HTML： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html&g

我在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>

Firefox似乎忽略了图像的CSS，在更改CSS参数时，它将保持不变。没有大小调整和青色边框。我还尝试了多种组合，只使用“max”，不使用“max”，同时使用“max height”和“height”。我还在另一台电脑上测试了它，以防Firefox的“about:config”在这台电脑上搞砸了

我是一个业余爱好者，所以请对我温柔一点，但是让所有的东西都在一个浏览器中工作，而不是在另一个浏览器中工作，真是令人沮丧。提前感谢任何能提供帮助的人

卡洛斯

//编辑//

我在胡闹的时候可能偶然发现了一个原因。看起来Firefox需要CSS标签“img”，而IE则同时接受这两个标签。这对任何人都有意义吗

所以

！DOCTYPE HTML PUBLIC“-//W3C//DTD HTML3.2//EN”>
图像{边框：2px固体青色；}

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

！DOCTYPE HTML PUBLIC“-//W3C//DTD HTML3.2//EN”>
img{边界：2px固体青色；}

两者都适用

Carlos

在css片段中使用图像而不是IMG作为css选择器

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

下面是一个尺寸合适的JSFIDLE：

让图像的“自动拉伸”在浏览器中工作是相当棘手的。我会回到一个为你做繁重工作的图书馆。我经常用反拉伸来做这件事。例如，我就用它。您可以在这里下载jquery库

Gotcha koenp。显示出我是多么的业余！

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

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