如何在css中保持宽度固定？答案

【问题标题】：How do I keep the width fixed in css?如何在css中保持宽度固定？
【发布时间】：2021-10-28 18:43:19
【问题描述】：

在英雄部分，如何保持背景宽度固定而只改变高度？

HTML：

<section id="hero">
<div class="container">
  <div class="info">
  <div class="img"></div> 
    <h1>This is a title</h1>
    <h2>Lorem ipsum dolor sit amet consectetur.</h2>
  </div>
  </div>
 </section>

CSS：

#hero{
 height: 100vh;
 width: 100%;
 background: linear-gradient(rgba(0, 0, 0, 0.089), rgba(0, 0,   0, 0.089)), url(images/backgroundheader.png) no-repeat center /   cover;
 }

我希望能够从左到右查看所有图像，并且仅在调整浏览器大小时更改高度。

目前，当我调整浏览器大小时，图像的边缘（左右）消失了。

【问题讨论】：

这是您要找的吗？ developer.mozilla.org/en-US/docs/Web/CSS/object-fit
是的，所以如果浏览器更大并且我不想要白色边框，我可以使用“@media 屏幕尺寸”吗？或者有没有更好的方法来防止使用“包含”的线条？
我不介意顶部或底部的边框，因为我可能会移动图像。只要图像被调整大小而不是剪切。

标签： html css

【解决方案1】：

使用标签元素，即浏览器窗口的高度。

html {
background: background: linear-gradient(rgba(0, 0, 0, 0.089), rgba(0, 0,   0, 0.089)), url(images/backgroundheader.png) no-repeat center fixed;

background-size: cover;
}

【讨论】：