Como eu faria para redimensionar a imagem de forma proporcional, de modo que ela fique com a mesma qualidade? Tem algum comando?
Imaginem por exemplo: eu tenho uma imagem 600x400. Mas ela não bate com o navegador, que é maior que isso.
Se eu redimensionar a imagem na largura para 100% e quiser que ela fique com 400, como fazer sem ela ficar distorcida? Tem como?
Estou fazendo uma pagina da minha empresa, coloquei as imagens, mas ela nao ficam centralizadas no carousel, já tentei algumas coisa, mas pode ser que eu esteja fazendo errado, já que estou aprendendo também.
<section class="secaoGecdi">
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col-sm">
<h2 class="titulo-gecdi"><b>Nossos Canais Digitais</b> </h2>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<figure class="item active">
<img src="img/caixatem.secaocanaisdigitais0.png" class="d-block w-100" alt="Caixa Tem">
<figcaption class="carousel-caption">
<h3>Caixa Tem</h3>
<p></p>
</figcaption>
</figure>
<figure class="item">
<img src="img/gerenciador.secaocanaisdigitais1.png" class="d-block w-100" alt="Gerenciador">
<figcaption class="carousel-caption">
<h3>Gerenciador Caixa</h3>
<p></p>
</figcaption>
</figure>
<figure class="item">
<img src="img/sms.secaocanaisdigitais2.jpg" class="d-block w-100" alt="SMS">
<figcaption class="carousel-caption">
<h3>SMS</h3>
<p></p>
</figcaption>
</figure>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
# </section>
Boa noite, Ericson! Tudo bem?
Eu também ainda estou aprendendo, assim como você, mas eu acredito que para isso você poderia utilizar a propriedade de CSS "object-fit", que serve para definir como a imagem vai se comportar dentro de uma div com certa altura e largura, por exemplo.
Os valores que podem ser atribuídos a essa propriedade são: fill, contain, cover, none e scale-down. Assim você não precisa editar a imagem antes de utilizá-la. Porém, é possível que para que ela não perca qualidade, um pedaço dela seja cortado, usando a propriedade.
Vou deixar uns links aqui da explicação da propriedade (só achei em inglês):
Espero ter ajudado :)