Css 在div内调整图像大小（再次）_Css_Html_Resize

Css 在div内调整图像大小（再次）

css html

Css 在div内调整图像大小（再次）,css,html,resize,Css,Html,Resize,我知道有一些关于这个主题的帖子在流传，但我真的找不到解决我周围问题的方法。。我有一个测试站点，目前我正在使用它来显示我的问题。我做了一个简单的布局，有一个页眉、一个左div、一个右div和一个页脚。每一个都有非常不同的颜色，以便更容易识别它们。我的问题在于调整标题背景img的大小。我试着插入背景尺寸：100%技巧，但如果我只插入，是的，它将拉伸以适应div的宽度（如预期的），但高度将全部搞乱。。它的高度大约为20像素。我打算让它相应地填充高度。我尝试将div高度设置为最大img大小。这只会

我知道有一些关于这个主题的帖子在流传，但我真的找不到解决我周围问题的方法。。我有一个测试站点，目前我正在使用它来显示我的问题。我做了一个简单的布局，有一个页眉、一个左div、一个右div和一个页脚。每一个都有非常不同的颜色，以便更容易识别它们。我的问题在于调整标题背景img的大小。我试着插入背景尺寸：100%技巧，但如果我只插入，是的，它将拉伸以适应div的宽度（如预期的），但高度将全部搞乱。。它的高度大约为20像素。我打算让它相应地填充高度。我尝试将div高度设置为最大img大小。这只会在站点最大化时解决问题（因为div height是一个固定值，如果站点最大化，所有显示都会正常，但是如果我缩小窗口，pic的宽度和高度都会变小，但是div的大小将相同，从而显示绿色背景，如示例中所示）

总之，有没有办法使渐变背景图像跟随div高度大小和宽度

这里是我的测试链接，向您展示我到目前为止的成果（我让它具有固定的div高度）

这是我的密码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IGG</title>
<link href="igg.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="wrapper"><!--wrapper starts--> 
<div id="main1">content</div>
<div id="left">content</div>
<div id="right"><div><embed width="100%" height="600px" loop="false"
src="photogallery_with_scroll2.swf"></div>
</div>
<div id="footer">footer</div>
</div><!--end wrapper-->
</body>
</html>

请注意，如果缩小测试场地，将显示div的绿色背景。如果我从css样式表中删除---height:200px---，高度将缩小为一条细线

那么……请帮我个忙？；）非常感谢您的光临。

请使用此选项：

.css3gradient{
     background-color:#43493f;
  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#43493f, endColorstr=#848079);
 background-image:-moz-linear-gradient(left, #43493f 0%, #848079 100%);
 background-image:-webkit-linear-gradient(left, #43493f 0%, #848079 100%);
  background-image:-ms-linear-gradient(left, #43493f 0%, #848079 100%);
  background-image:linear-gradient(left, #43493f 0%, #848079 100%);
 background-image:-o-linear-gradient(left, #43493f 0%, #848079 100%);
 background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#43493f), color-stop(100%,#848079));

改用这个：

.css3gradient{
     background-color:#43493f;
  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#43493f, endColorstr=#848079);
 background-image:-moz-linear-gradient(left, #43493f 0%, #848079 100%);
 background-image:-webkit-linear-gradient(left, #43493f 0%, #848079 100%);
  background-image:-ms-linear-gradient(left, #43493f 0%, #848079 100%);
  background-image:linear-gradient(left, #43493f 0%, #848079 100%);
 background-image:-o-linear-gradient(left, #43493f 0%, #848079 100%);
 background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#43493f), color-stop(100%,#848079));

好了，开始工作了：

#main1 {
   background-color: #CF6;
   background-image: url(header_gradient.png);
   background-size: cover;
   background-repeat: no-repeat;
   height: 200px;
   width: 100%;
}

好了，开始工作了：

#main1 {
   background-color: #CF6;
   background-image: url(header_gradient.png);
   background-size: cover;
   background-repeat: no-repeat;
   height: 200px;
   width: 100%;
}

是否可以选择使用CSS渐变而不是.png图像？应该使用渐变属性而不是渐变。png@Ani请记住，如果你使用渐变，它的支持不是很好，特别是在IE中，请看，如果你使用filter attributewell，其中一些是，在示例中它是渐变img，但在真实的站点中，我打算使用照片，因此，我恐怕不能使用渐变属性…它是使用CSS渐变而不是.png图像的选项吗？应该使用渐变属性而不是渐变。png@Ani请记住，如果你使用渐变，它的支持不是很好，特别是在IE中，请看，如果你使用filter attributewell，其中一些是，在示例中它是渐变img，但在真实的站点中，我打算使用照片，因此，我恐怕不能使用梯度属性…我认为我不应该使用梯度img作为示例..^^就像我上面所说的，我使用梯度img仅仅作为一个例子。我真正需要知道的是（因为这是我将在真实站点中使用的）如何使用any.png img.Yes调整高度。每个人都从问题中得到了补充：P@user2501765你试过背景位置吗？cssi中的“上止点”我想我不应该用渐变img作为例子。^^就像我上面所说的，我使用梯度img仅仅作为一个例子。我真正需要知道的是（因为这是我将在真实站点中使用的）如何使用any.png img.Yes调整高度。每个人都从问题中得到了补充：P@user2501765你是否尝试过背景位置：cssNop中的“顶级中锋”.无效。。现在高度正常，但宽度不适合整个分区。。图像将不会超出其原始大小。。。你可以在测试现场看到结果。。。您必须使用属性背景大小：封面；检查以上帖子css并与urs相符。编辑：更改图像以更好地查看结果。。正如你所见，约塞米蒂山根本没有调整大小！！！你没有财产#main1{背景尺寸：封面；}对不起，我回答你时，你没有注意到你已经回答了。。。添加了背景尺寸：封面。。。结果仍然不是预期的，因为图像在最大化时确实会拉伸到完整的div大小，但另一方面，当站点缩小时，图像将被剪切…不..不起作用。。现在高度正常，但宽度不适合整个分区。。图像将不会超出其原始大小。。。你可以在测试现场看到结果。。。您必须使用属性背景大小：封面；检查以上帖子css并与urs相符。编辑：更改图像以更好地查看结果。。正如你所见，约塞米蒂山根本没有调整大小！！！你没有财产#main1{背景尺寸：封面；}对不起，我回答你时，你没有注意到你已经回答了。。。添加了背景尺寸：封面。。。结果仍然不是预期的，因为图像在最大化时确实会拉伸到全div大小，但另一方面，当站点缩小时，图像现在将被剪切。。。