Padronizar tamanho de thumbnails

Tenho várias imagens que estão cada uma dentro de uma div (usando bootstrap). Estava tudo certo até eu colocar uma imagem diferente, com tamanho diferente.

Estou tentando padronizar o tamanho das imagens, mas não tô conseguindo. Segui esse tópico e outros, mas nada. Alguém me dá uma luz? Preciso que independente de qual img eu coloque, ela sempre se ajuste ao tamanho e largura padrões das divs.

HTML:

      <!--Início do showcase -->
            <!-- 2a coluna = sobra de col-sm-3 col-lg-2 -->                                          
            <div class="col-sm-9 col-lg-10">
                <div class="row">
                    <h1 class="text-center">Portfolio</h1>
                    
                    <div class="col-sm-9 col-md-5 col-lg-5 item-portfolio holder">
                        <a href="https://github.com/nanquim/ToriCad" target="_blank">
                        <img class="img-thumbnail" src="img/toriGate.png"></a>
                    </div>
                    <div class="col-sm-9 col-md-5 col-lg-5 item-portfolio holder">
                        <a href="#" target="_blank">
                        <img class="img-thumbnail" src="img/underConstruction.png"></a>
                    </div>
                    <div class="col-sm-9 col-md-5 col-lg-5 item-portfolio holder">
                        <a href="#" target="_blank">
                        <img class="img-thumbnail" src="img/underConstruction.png"></a>
                    </div>
                    <div class="col-sm-9 col-md-5 col-lg-5 item-portfolio holder">
                        <a href="#" target="_blank">
                        <img class="img-thumbnail" src="img/underConstruction.png"></a>
                    </div>
                    <div class="col-sm-9 col-md-5 col-lg-5 item-portfolio holder">
                        <a href="#" target="_blank">
                        <img class="img-thumbnail" src="img/underConstruction.png"></a>
                    </div>
                    <div class="col-sm-9 col-md-5 col-lg-5 item-portfolio holder">
                        <a href="#" target="_blank">
                        <img class="img-thumbnail" src="img/underConstruction.png"></a>
                    </div>
                    
                </div> 
            </div><!-- Fim da 2a. coluna -->

Boa noite jovem!
Já experimentou utilizar timthumb? Segue abaixo um tutorial de como facilitar sua vida.

já tenho os thumbnails… queria uma ajuda no CSS para isso…

Considerando que as divs sao colunas da grid do bootstrap

Bem, o jeito foi:

.div{
  height: 450px;
  width: 450px;
}
.div img{
    width: 100%;
    height: 100%;
}

Se alguém tiver uma solução melhor…

1 curtida

está e a solução, % ou auto,

você também pode colocar max-width e min-width ou definir os esses atributos de acordo com o tamanho da janela, tudo depende da sua necessidade, como ainda não trabalho com bootstrap, não sei se ajusta a sua.

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

2 curtidas