Question

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

我发现this线程很好地描述了问题，我试图用background-size更改css：包含哪些似乎不起作用。

任何建议表示赞赏。

谢谢！

示例：http://www.filedropper.com/jetstrapexample2

Answer 1

亚历山大·德索萨（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％的宽度和高度。

我希望有所帮助！

Answer 2

.background img {
    min-width: 100%;
    max-width: 100%;
    height: auto;
    }

要保持图像比例，您可以设置任何宽度，但请确保指定高度为自动。

可能值得分享指向您正在使用的网站的链接

Answer 3

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

在窗口调整大小的Bootstrap网站横幅失真

3 个答案: