0

使用 bootstrap 网站创建器 jetstrap，我创建了一个简单的网站，其中的横幅图像可以拉伸窗口的大小。问题是拉伸的图像上有一个徽标，并且在调整窗口大小时，图像会变形和拉伸。

我发现这个线程很好地描述了这个问题，我试图用 background-size: contains 更改 css 似乎不起作用。

任何建议表示赞赏。

谢谢！

这里的例子：http ://www.filedropper.com/jetstrapexample2

4

3 回答 3

3

亚历山大·德索萨（Alexander De Sousa）非常喜欢它，但这里有一些针对您的示例的特定代码：

在您的文件中，您有一个<img>标签，您绝对可以使用它width:100%来拉伸屏幕的大小。这是代码位：

<img class="jetstrap-selected jetstrap-highlighted" id="backimage" src="https://s3.amazonaws.com/media.jetstrap.com/Nd7Z0DbqQ4eNN2cV05DI_background.png">

它位于一个名为“carousel”的类名的 div 容器中。

<div id="myCarousel" class="carousel slide" data-pause="remove">...</div>

控制此元素的 CSS 位于您在上面下载时提供的 HTML 页面的底部。影响此元素的相关 CSS 是：

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;  /* THIS IS THE PROBLEM */
  background-size: contain;
}

正如您在上面的 CSS 中看到的，它设置了一个非常具体的高度值。这会降低背景图像的纵横比。这意味着，当使用 时min-width:100%;，以像素为单位的实际宽度会随屏幕大小而变化。

如果屏幕为 1000 像素宽，则您的图像为 1000 像素宽。如果你把它缩小到 875px，你的图片就是 875px。

此时，您的高度始终保持在 500px。所以你的背景图片，它使用带有相当大的方形“标志”图像的图案背景，实际上被 CSS 请求扭曲了。

因为在某一时刻它是1000px / 500px，而在另一时刻它是875px / 500px。

当然，也涉及到媒体查询。在不同的屏幕尺寸下，高度值设置为特定值。

我认为您正在尝试使用带有徽标的平铺背景图像，该徽标可以响应地调整其大小/定位（即屏幕大小）。

你会想要考虑做更多这样的事情：

<div id="#background">
    <img src="myLogo.png" alt="" />
</div>

这个容器将作为你的背景。我会把它放在你的<div id="myCarousel">...</div>元素结束之前。

从那里，您定位该容器并用重复的背景填充它（或者您可以添加另一个响应图像来缩放它）：

#background{
  position:absolute;
  top:0; 
  left:0;
  width:100%;
  height:500px;  /* You can set a specific height here, so it covers your content */
  background: url(myBackground.png) repeat 50% 50%; /* if you don't want your background to distort, use a tiled background */
}

使用“徽标”，您可以根据需要将其绝对定位在您的背景容器中。

#background img{
  position:absolute;
  top:10em;
  right:20%;
  width:200px; /* Or use a % to scale the logo fluidly */
}

使用媒体查询，您可以根据屏幕大小的需要调整徽标的位置。

这种技术使您的背景图像保持一致，因此它不会缩小/扩大渐变。相反，背景将随着屏幕尺寸的变化而裁剪。如果您更喜欢缩放背景，您可以简单地在背景容器中添加另一个 img 并使用 CSS 类或 ID 适当地标记它们并应用样式。

<div id="#background">
    <img id="myBgLogo" src="myLogo.png" alt="" />
    <img id="myBgFill" src="myBackground.png" alt="" />
</div>

然后只需专门针对图像并将它们分层，为背景提供 100% 的宽度和高度。

我希望这会有所帮助！

于 2013-05-17T14:59:51.780 回答
1 
.background img {
    min-width: 100%;
    max-width: 100%;
    height: auto;
    }

为了使图像保持成比例，您可以设置任何您喜欢的宽度，但请确保您已将高度指定为自动。

可能值得分享您正在处理的网站的链接

于 2013-05-16T18:14:21.953 回答
0

问题是为图像定义一个大于图像纵横比的特定高度。您将需要删除高度定义或将图像更改为绝对定位的 div 的背景，以使其扩展到视口之外。

于 2013-05-16T18:30:43.870 回答