Padronizar tamanho de thumbnails

Front-end CSS
#1

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 -->
#2

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

#3

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

Considerando que as divs sao colunas da grid do bootstrap

#4

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
#5

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