Размер CSS Bootstrap Grid system

Question

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

Я работаю с CSS Bootstrap и энергосистемой, как:

<div class="col-md-12"> <div class="fh5co-grid" style="background-image: url(images/xxxx-1-2.jpg);"> <a class="image-popup text-center" > <div class="prod-title "> <h3 style="height:5%;"> “text"”</h3> </div> </a> </div> </div>

Так на сервере изображения имел размер 474 х 698 пикселей, но система сетки культур изображение немного?

Какой размер/размер использует сетка?

Большое спасибо

Answer 1

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

img { max-width: 100%; }

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

PS. Это правило должно быть в bootstrap, поэтому проверьте, как вы добавляете загрузочную страницу на свою веб-страницу.

Answer 2

Что вы можете сделать, это добавить css для этого фонового изображения.

.fh5co-grid{ 
    background-image: url(images/xxxx-1-2.jpg); 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

Если вы хотите, чтобы убедиться, что этот код будет получить полную ширину экрана, убедитесь, что ваш HTML Col-LG-12 обернут на контейнер-жидкость.