Diminuir altura da imagem no Bootstrap usando o carousel

14/12/2016

0

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
Rogerio Santos

Rogerio Santos

Responder

Posts

14/12/2016

Aline Bianchini

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

14/12/2016

Aline Bianchini

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?

[url:descricao=Debugando o código no Chrome]https://www.devmedia.com.br/debugando-seu-codigo-com-google-chrome/29137[/url]

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

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar