Question

我正在为学校项目构建一个简单的网站，我已经将图片插入html的section元素中（由于SEO）。

我已经以许多不同的方式调整了它的大小（例如，id，class，最大宽度，百分比，像素），但是它总是显得很大。

我的目标是将其设置为该部分的背景图片，我需要使网站具有响应性。

这是HTML：

        <section class="one">
            <div id="first-section" class="container-fluid first-section">
                <img src="src/CarLine.jpg" alt="Tours and Transfers" 
        class="first-section-background">
                <h2 class="title-first-section">TAKE A LAP TOURS <br>& 
        TRANSFERS: the <br>service you need
                </h2>
            </div>
        </section>

这是CSS：


        img {
            width:100%;
        height:auto;
          }

Answer 1

我假设您希望图像占据全部空间（根据所应用的样式）。
您可以尝试：

section {
  background: url('src/Carline.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 500px;
}

由于此处未提供图像，因此是否要占用整个空间取决于图像尺寸。如果尺寸较小，可以尝试

background-size: contain;

希望有帮助。干杯！

Answer 2

可以使用CSS属性<img>代替background-image标签。您可以在下面运行该代码片段以查看其工作原理。 height之所以存在，是因为没有它，图像将与文本一样高，并且看不到任何鸟类。您可以根据需要在项目中进行调整。

您可以在此处了解有关background-image的更多信息：

（这些属性也可能会帮助您：background-repeat，background-size和background-repeat。您也可以在MDN和w3schools上找到有关它们的信息。）

玩得开心！

.one {
  background-image: url(https://images.unsplash.com/photo-1557766185-665228a26733?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  background-size: cover;
  height: 350px;
}

<section class="one">
  <div id="first-section" class="container-fluid first-section">
    <h2 class="title-first-section">TAKE A LAP TOURS
      <br>& TRANSFERS: the
      <br>service you need
    </h2>
  </div>
</section>

Answer 3

无论图像是大还是小，这应该始终有效。

body {
  margin: 0;
  font-size: 32px;
  color: white;
  font-family: calibri;
}

section {
  background-image: url('https://www.wonderplugin.com/videos/demo-image0.jpg');
  background-repeat: no-repeat;
  background-size: 80vw 50vh;
  height: 50vh;
  width: 80vw;
}

<section>
<div>
Hello<br>
</div>
</section>

我在这里所做的是将图像设为该部分的background-image。然后，我给background-image的高度和宽度与该部分本身完全相同。

无法正确调整节背景图片的大小

3 个答案: