引导网站横幅变形窗口调整大小

Bootstrap website banner distortion on window resize

本文关键字：窗口 调整 变形 网站      更新时间：2023-09-26

使用引导程序网站创建者jetstrap，我创建了一个简单的网站，其横幅图像可以拉伸窗口的大小。问题是拉伸后的图像上有一个徽标，在调整窗口大小时，图像会失真和拉伸。

我发现这个线程很好地描述了这个问题，我试图用背景大小更改css：contain，但似乎不起作用。

欢迎提出任何建议。

谢谢！

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

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。

此时，你的身高始终保持在500像素。所以你的背景图片，使用了一个相当大的正方形"徽标"图像的图案背景，实际上被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%的宽度和高度。

我希望这能有所帮助！

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

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

值得分享一个链接到您正在工作的网站

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

相关文章：