Diminuir altura da imagem no Bootstrap usando o carousel
14/12/2016
0
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
Posts
14/12/2016
Aline Bianchini
Você pode fazer isso através de css.
.carousel-inner > img {
width: 10%;
}14/12/2016
Rogerio Santos
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>
14/12/2016
Aline Bianchini
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.
14/12/2016
Rogerio Santos
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.
Clique aqui para fazer login e interagir na Comunidade :)