无法让图像拉伸全宽答案

【问题标题】：Cant get image to stretch full width无法让图像拉伸全宽
【发布时间】：2013-05-24 16:48:02
【问题描述】：

我一直在花时间让背景图像在屏幕上拉伸以适应屏幕，所以我没有决定将它添加为图像。下面是我想要完成的图像。我已经清除了该部分的所有 CSS 和 HTML，并希望重新从头开始。非常感谢帮忙。 www.jobspark.ca

【问题讨论】：

#site > .wrapper { 最大宽度：960px;这就是以固定宽度停止图像的原因
您可以使用 firebug 轻松识别这些类型的问题
@Sanath，谢谢，但是当我将 960 更改为 100% 时，如何防止文本在页面上延伸。我希望文本保持在 960px 的宽度
有一个单独的 div 和一个单独的样式来包含文本，并且该样式可以有最大宽度

【解决方案1】：

您的父容器已将宽度固定为 960 像素。如果您更改容器宽度，它将影响您的整个设计。最好试试我下面的代码。使位置绝对您的图像，您可以拉伸

.image-block-outer-wrapper{
     height:338px;
 }
.image-block-wrapper{
     position:absolute:
     //align this div using margin
}
 .image-block-wrapper img{
  width:1200px;
   //or increase original image width by photoshop and set width here whatever you want
  }

【讨论】：

【解决方案2】：

如果您希望图像在页面宽度上拉伸并且很高兴图像高度按比例缩放，请尝试 -

.image-block-wrapper {
    width:100%;
    display:block;
}
.image-block-wrapper img {
    width:100%;
    height:auto;
}

请确保“image-block-wrapper”元素没有嵌套在任何其他具有固定宽度的元素中。此外，标签不应指定宽度和高度属性。

【讨论】：