Twitter Bootstrap Карусель с наложением отзывчивого изображения

Я пытаюсь найти способ, чтобы «отзывчивое» изображение накладывало карусель из бутстрапа Twitter.Twitter Bootstrap Карусель с наложением отзывчивого изображения

Я нашел How do i add a mask on top of a bootstrap element?, который помог мне с наложением - но когда я добавляю изображение в этот div, он не изменяется, как карусель.

Из того, что я читал в бутстрапе, есть max-width:100% - это означает, что нужно установить ширину для наложения div?

Fiddle: http://jsfiddle.net/CF8m8/ - изменить ширину окна результатов, чтобы увидеть, что я имею в виду.

Благодарен за помощь.

источник

2013-02-24 nubje

Вы хотите, чтобы наложение также изменилось? – Shail

@Shail: Благодарим вас за ответ. Что ж, да, я бы хотел изменить размер изображения на оверлейке, так что он подходит «внутри» карусели. – nubje

вы можете сделать следующее: Jsfiddle Jsfiddle with resized overlay

Jsfiddle в браузере check in browser

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

<div class="container"> 
<div class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="overlay"></div> 
    <div class="item active"> 
     <a href=""><img src="http://www.placehold.it/900x500&text=One" /></a> 
    </div> 
    <div class="item"> 
     <a href=""><img src="http://www.placehold.it/900x500&text=Two" /></a> 
    </div> 
    <div class="item"> 
     <a href=""><img src="http://www.placehold.it/900x500&text=Three" /></a> 
    </div> 
</div> 
<a class="carousel-control left" href=".carousel" data-slide="prev">‹</a> 
<a class="carousel-control right" href=".carousel" data-slide="next">›</a> 
    </div> 
</div>

При использовании CSS следующее:

.overlay { 
background: url(http://lorempixel.com/310/310/cats/) top left no-repeat; 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
z-index: 10; 
pointer-events: none; 
    } 
    @media (min-width: 768px) and (max-width: 979px) { 
     .overlay{ 

     width:50%; 
     height:50%; 
    }  
} 

    @media (max-width: 767px) { 
    .overlay{ 

    width:50%; 
    height:50%; 
    } 

    } 
@media (max-width: 480px) { 
    .overlay{ 
    width:50%; 
    height:50%; 

    } 
}

источник

2013-02-25 08:03:06 Shail

Спасибо! Это то, что мне нужно, но есть ли способ изменить размер изображения, сохраняя соотношение сторон, а не обрезать его? Это для логотипа - не знаю, лучше ли изменить его размер - возможно, мне лучше создавать новые версии изображения. – nubje

он обрезается, потому что мы изменяем его до ненормального уровня, оптимизированное изображение будет вести себя более правильно. И я показал вам, как это сделать. Другое, что вы можете сделать, это создавать изображения разных размеров для обслуживания разных размеров экрана и вставлять их в запросы, которые я написал выше, таким образом можно управлять размером и качеством. Дайте мне знать, если вам нужна дополнительная помощь. – Shail

Что вы подразумеваете под «оптимизированным изображением»? Из моих попыток карусель получает размер и не обрезается, поэтому, если наложение может вести себя так же, как было бы идеально. Я также пробовал с изображениями разных размеров, но есть много медиа-запросов: – nubje

Я думаю, что есть лучшее решение. @Shail. Я буду использовать ваш пример.

Добавьте изображение, как показано ниже, на div = overlay и добавьте класс «image-responsive». Тогда бутстрап позаботится обо всем остальном.

<div class="overlay"> 
<img src="images/slideshowfx.png" class="image-responsive"/> 
</div>

Я использовал размер ширина = «1200px» и высота = «300px (или любой высоты вы хотите)»

После удаления ненужных стилей, то CSS будет так.

.overlay { 
position: absolute; 
top: 0; 
left: 0; 
z-index: 10; 
}

Это все, что вам нужно. Вы можете устранить все другие ненужные стили CSS.

источник

2013-08-05 03:06:36

Лучшая ставка для изменения размера изображения без медиа-запросов - это дать вашему изображению класс «img-отзывчивый».

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

Что касается накладной части ..., которая была достаточно подробно рассмотрена выше.

источник

2015-10-01 22:44:06

Twitter Bootstrap Карусель с наложением отзывчивого изображения

ответ

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