Bootstrap изображение обрезается

Question

У меня есть бутстрап Masthead img, который великолепен, когда его полный размер, но при уменьшении страницы все ~ 25% верхней и нижней частей обрезаются. Из всех вещей на странице я хочу, чтобы это правильно масштабировалось. Я пробовал ширину: 100%, но это не работает

 padding-top: 10rem;
   padding-bottom: calc(10rem - 56px);
   background-image: url("../img/Am/20180904_094438cropped.jpg");
   background-position: center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

Спасибо

Answer 1

Вы можете попробовать поместить свой код в контейнер div.Это может выглядеть примерно так:

.container {
padding-top: 10 rem;
padding-bottom: calc(10rem - 56px);
background-image: url("../img/AM/20180904_094438cropped.jpg");
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
width: 100%;
}

Кроме того, я нашел для вас следующую ссылку: похожая тема по переполнению стека

Я думаю, что это может помочь.Ваш код выглядит примерно так же, однако ширина 100% немного отличается!Проверьте это.