Bootstrap HTML - Где я могу вставить изображения?

Question

Итак, я задаю вопрос относительно этого bootstrap шаблона: https://startbootstrap.com/previews/landing-page/

Как вы можете видеть, есть 3 раздела, в которых говорится "Полностью отзывчив, Bootstrap4 Ready и Простота в использовании "

Мой вопрос заключается в том, как вставить изображение в эти разделы?

Возможно, мне нужно вставить изображение в эту строку кода:

 <div class="features-icons-icon d-flex">

Я уже попробовал это, просто заменив класс svg на

style="background-image: url('img/hello.jpg');"></div>

Однако изображение не появится.

Answer 1

Везде, где вы хотите вставить изображение, используйте тег изображения.

<img src="img/hello.jpg">

Три «изображения», экран компьютера, стопка и галочка, на самом деле не изображения, а значки , представленный тегом i.

Чтобы стилизовать аналогично значкам (высота, ширина), вам придется настроить css так, как вам удобно.

<img src="img/hello.jpg" style="height: 100px; width: 100px">

Answer 2

Нет ничего плохого в вашем коде, по-видимому, но ваш вопрос довольно общий c. Итак, вот несколько шагов для рассмотрения:

1. Убедитесь, что вы используете правильный путь к своему изображению. Как бы глупо ни звучал этот совет, в HTML нужно кое-что обратить внимание на пути. Проверьте ваши инструменты разработчика браузера с элементом inspect, чтобы увидеть, правильно ли загружено это изображение. Для лучшей справки, проверьте: https://www.w3schools.com/html/html_filepaths.asp

2. Установите высоту и ширину для вашего div. Div - это блочные элементы. Это означает, что обычно они принимают размер элементов внутри него. Если внутри этого элемента Div ничего нет, ширина и высота элемента блока будут равны 0. До тех пор, пока вы не собираетесь вставлять что-либо внутрь, вы должны добавить свойства width и height в ваш div, чтобы обеспечить сам элемент не зависит от других элементов, чтобы иметь высоту или ширину. Внутри вашего файла css убедитесь, что у вас есть что-то вроде:

.features-icons-icon{
    background-image: url('img/hello.jpg');
    height: 50px;
    width: 100px;
}

Для лучшей ссылки на элементы блока, пожалуйста, проверьте: https://www.w3schools.com/html/html_blocks.asp

3. Убедитесь, что, если вы используете отзывчивые ширину и высоту, элемент, в который вложен div, имеет ширину и высоту. Поскольку элемент div вложен в другой элемент, элемент, в который вложен этот пустой div, который использует относительный css единицы измерения должны иметь длину и ширину сами по себе. Для более точной ссылки на относительные единицы, пожалуйста, проверьте: введите описание ссылки здесь

Возможно, я что-то пропустил, но этих советов должно хватить. Моя личная догадка состоит в том, что вы должны проверить шаг 2, который вы могли пропустить.

Answer 3

Просто попробуйте использовать <img> вместо стиля