Как изменить размер фонового изображения, чтобы в нем содержался весь текст

#html #css

#HTML #css — файл #css

Вопрос:

Как сделать так, чтобы весь текст помещался внутри фонового изображения на всех размерах экрана, я написал этот код, но текст по-прежнему выходит за пределы изображения . Также на больших экранах справа есть пробел , как его убрать .

Снимки экрана :

Дополнительное пустое пространство на снимке экрана с правой стороны

дополнительное пустое пространство на снимке экрана с правой стороны

Текст выходит за пределы фона на маленьких экранах

текст выходит за пределы фона на маленьких экранах

HTML :

  <div class="h-100">
    <div class="h-100" id="background">
      <div class="container">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo suscipit quis sed temporibus eius magni, adipisci, ad, maxime saepe mollitia id sunt perspiciatis asperiores earum voluptate fugiat pariatur. Officia repudiandae iusto maxime ad quibusdam! Esse adipisci eos tenetur rerum amet, doloremque quidem commodi architecto quis, quaerat culpa, distinctio praesentium sunt.</p>
      </div>
    </div>
  </div>

CSS — файл :

 #background {
  background-image: url("../imgs/15409-[Converted].jpg");
  background-size: contain;
  background-repeat: no-repeat;
}

1. как насчет создания div , которое заполняет всю страницу, а затем содержит ваш текст в этом div? Что вы хотите делать, когда текста больше, чем может поместиться в изображении?

2. Я хочу уменьшить шрифт или увеличить изображение, насколько это возможно, я не возражаю

3. Но мое главное — удалить лишнее пустое пространство на стороне записи

4. Установите размер фона равным 100% >> background-size: 100%;

Ответ №1:

Звучит так, как вам может понадобиться background-size: cover; . Это пропорционально увеличит изображение, чтобы полностью покрыть фон, возможно, обрезав его.

Если вы хотите предотвратить обрезку, вы можете настроить background-size: 100%; для изображения, которое будет закрывать весь фон, но может быть растянуто.

(подробности)

1. но background-cover вырежьте изображение на маленьких экранах!!

2. Я хочу, чтобы на всех экранах было одно и то же точное изображение

3. невозможно, вам придется либо деформировать изображение, растягивая его, либо согласиться с тем, что оно будет обрезано. Не все окна просмотра имеют одинаковую форму, поэтому изображение будет либо вырезано, либо искажено, чтобы заполнить экран

Ответ №2:

Я прочитал ваши комментарии к другим ответам, и я думаю, вы неправильно понимаете, что здесь происходит с соотношением сторон изображения.

ОДНАКО, если вы хотите полностью растягивать и деформировать изображение, чтобы каждый раз заполнять экран, а не повторяться .. тогда используйте background-size: 100%; в своем CSS для фонового изображения.

Ответ №3:

Глядя на ответы, я думаю, что то, что вы ищете, меняется background-size: contain; для background-size: 100% 100%; , тем самым растягивая изображение, чтобы всегда соответствовать содержимому.

Дайте мне знать, если это то, что вы ищете.

Вы можете протестировать мою идею наhttps://jsfiddle.net/alemohamad/fu8szLmc/3 /.