Diminuir altura da imagem no Bootstrap usando o carousel

14/12/2016

33

Bom dia
Como faço para diminuir a altura da imagem no bootstrap em um carousel? Segue abaixo o código que fiz.

<div class="col-xs-12">
<div id="carousel01" class="carousel slide" data-ride="carousel" data-interval="5000">

<ol class="carousel-indicators">
<li data-target="#carousel01" data-slide-to="0" class="active"></li>
<li data-target="#carousel01" data-slide-to="1"></li>
<li data-target="#carousel01" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="imagens/html5.png" height="100px">

<div class="carousel-caption">
<h3>Título da imagem</h3>
<p>texto relativo a imagem</p>
</div>

</div>


Na linha de código que eu uso <img src="imagens/html5.png" height="100px"> ele não muda a altura....

Fico no aguardo...
Rogério
Responder

Posts

Olá Rogério,

Você pode fazer isso através de css.

.carousel-inner > img {
      width: 10%;     
  }
Responder

14/12/2016

Rogerio Santos

Olá..
Obrigado por responder... Mas não deu certo
Fiz a classe no css como você colocou e no html fiz assim:
<div class="item">
<img src="imagens/java.jpg" class="carousel-inner"/>
</div>
Responder
Será que tem alguma outra classe impedindo o redimensionamento?
Porque você poderia criar uma classe com qualquer nome, setar o atributo de height e chamar no seu elemento de imagem. Tipo:

<style>
.teste
{
    width: 90%;
}
<style>


E no seu elemento
<img src="imagens/java.jpg" class="teste"/>


Você utiliza algum recurso de Inspector(Debug) ? Tipo do Chrome?

Debugando o código no Chrome

Assim você consegue ver se tem alguma classe sobrepondo a outra .

Até mesmo se você coloca-se como você disse
<img src="imagens/html5.png" height="100px">
deveria funcionar. Não há impeditivos para tamanho no caso da classe de carousel.
Responder

14/12/2016

Rogerio Santos

Olá...
Se tem alguma outra classe impedindo o redimensionamento, bom ai não sei..
Não tenho hábito de usar o debug do Chrome mas agora vou usar para ver esse problema...
Mas obrigado pela sua atenção.
Responder