Не удается правильно изменить размер фонового изображения раздела

Question

Я создаю простой веб-сайт для школьного проекта, я вставил изображение в элемент section с HTML (из-за SEO).

Я уже изменил его размеры по-разному (например, id, class, max-width, процент, пиксели), но он всегда выглядит очень большим.

Моя цель - установить его в качестве фонового изображения раздела, и мне нужно, чтобы сайт был адаптивным.

Вот 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

Вместо тега <img> вы можете использовать свойство CSS background-image. Ниже вы можете запустить фрагмент, чтобы увидеть, как он работает. height есть, потому что без него изображение было бы таким же высоким, как и текст, и никакой птицы не было бы видно. Вы можете адаптировать это в своем проекте по мере необходимости.

Подробнее о background-image можно узнать здесь:

• MDN - фоновое изображение
• w3schools - 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 2

Это всегда должно работать независимо от того, действительно ли изображение действительно большое или очень маленькое.

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 ту же высоту и ширину, что и сам раздел.

Answer 3

Я предполагаю, что вы хотите, чтобы изображение занимало все пространство (из примененного стиля).Вы можете попробовать:

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

Поскольку вы не предоставили изображение здесь, это зависит от размера вашего изображения, займет ли оно все пространство или нет.Если он меньше по размеру, вы можете попробовать

background-size: contain;

Надеюсь, это поможет.Ура!