javascript - Bootstrap 网站横幅在窗口调整大小时失真

Question

使用 Bootstrap 网站创建器 jetstrap，我创建了一个简单的网站，其中的横幅图像拉伸(stretch)了窗口的大小。问题是拉伸(stretch)后的图像上有 Logo ，在调整窗口大小时图像会变形和拉伸(stretch)。

我找到了 this thread 很好地描述了问题，我尝试用 background-size: contain 更改 css，但似乎不起作用。

任何建议表示赞赏。

谢谢!

此处示例:http://www.filedropper.com/jetstrapexample2

Answer 1

Alexander De Sousa 非常适合它，但这里有一些针对您的示例的特定代码:

在您的文件中，您有一个 <img>您绝对定位的标签 width:100%拉伸(stretch)屏幕的大小。这是代码位:

<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 像素宽。如果将其调整为 875 像素，则图像为 875 像素。

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

因为在某一时刻它是 1000px / 500px另一个是875px / 500px .

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

我认为您想要的是拥有一个带有 Logo 的平铺背景图像，该 Logo 可以响应地调整其大小/位置(即屏幕大小)。

你会想要考虑做更像这样的事情:

<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 */
}

使用“ Logo ”，您可以根据需要将其完全放置在背景容器中。

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

使用媒体查询，您可以根据屏幕尺寸的需要调整 Logo 的位置。

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

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

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

希望对您有所帮助!