Div class = "jumbotron" для увеличения размера его фонового изображения

У меня есть изображение размера 1400x560, и я хочу, чтобы мой jumbotron div был масштабирован, чтобы соответствовать размеру изображения. Он отлично работает, когда я устанавливаю ширину jumbotron по отношению к изображению, но когда я сжимаю веб-сайт для мобильного просмотра, у меня возникают проблемы. Итак, как я могу это исправить? Я забыл упомянуть, что у меня проблема с высотой, а не с шириной. Шкала jumbotron div до ширины 1400, но не до высоты 560px. Вот предварительный просмотр страницы html http://threeguys.us/rts/testing.html.Div class = "jumbotron" для увеличения размера его фонового изображения

Когда я сжать страницу, я хочу, чтобы изображение, чтобы изменить размер по ширине браузера

index.html

<div class="jumbotron"> 
</div>

CSS

.jumbotron 
{ 
padding-top: 0px; 
padding-bottom:0px; 
background-image:url('images/car/car.jpg'); 
background-size: cover; 
height:560px; 
}

источник

2015-07-31 BDS

Какие проблемы? –

Я не считаю, что на рост влияет мобильный вид. Высота просто изменяет размер прокрутки. Если вам нужно, чтобы ваш div имел определенную высоту, заполните его контентом или определите его в пикселях. Установите 'width: 100%;', чтобы он мог масштабироваться. См. Мой ответ для более подробной информации. – brandaemon

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

Что вы ищете является background: contain;. Просто добавьте в ваш класс следующим образом:

.jumbotron 
{ 
    padding-top: 0px; 
    padding-bottom:0px; 
    background-image:url('images/car/car.jpg'); 
    background-size: cover; 
    background: contain; 
    width: 100%; /* make sure to define width to fill container */ 
    height: 100px; /* define the height in pixels or make sure */ 
        /* you have something in your div with height */ 
        /* so you can see your image */ 
    max-width:1400px; /* define the max width */ 
}

Фоновое изображение теперь будет масштабироваться с размером div (при условии div масштабируется). Если вы хотите ограничить свой div так он не получает больше определенного размера (в вашем случае размер фонового изображения), используйте max-width: 1400px;

Смотрите мой JSFiddle example.

источник

2015-07-31 19:11:47 brandaemon

Try :

background-size: 100%; 
width:100% 
position:relative;

Надеется, что это помогает вам

источник

2015-07-31 19:07:51

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

Чтобы получить свой div, чтобы подогнать размер изображения, использовать display: inline-block на DIV:

.jumbotron 
 
{ 
 
    display: inline-block; 
 
    border: solid red 1px; 
 
}

<div class="jumbotron"> 
 
    <img src="http://i.imgur.com/5LGqY2p.jpg?1" /> 
 
</div>

источник

2015-07-31 19:12:54

Div class = "jumbotron" для увеличения размера его фонового изображения

ответ

Смежные вопросы