Dúvida sobre como alinhar imagens loja virtual

[Tiago j.a 0]

Olá Pessoal, gostaria de uma ajuda referente um item.

Estou criando um site, onde preciso alinhar os produtos na loja. É um layout responsive, então, quando a tela fica menor, a imagem já é mostrada em uma tamanho maior devido a este conceito.

O problema é que preciso colocar um limite máximo para as minhas imagens, pois, como terei muitas fotos, não conseguirei redimensionar cada uma.

Só que não sei como colocar um máximo de tamanho nas fotos, para que todas fiquem com um tamanho parecido, seja em % ou px, sem afetar a questão responsive, quando o site ficará em uma tela de mobile por exemplo.

Poderiam me ajudar com isso por favor?

[L. Henrique 179]

Tiago,

Para isso você possui propriedades como min / max width / height.

Exemplo:

img {
   width: 100%;
   height: auto;
}

@media screen and (max-width: 768px) {
   img {
      max-width: 768px;
   }
}

Ou ao invés de usar tags img, você pode usar a propriedade background url numa div e definir um tamanho padrão pra ela.

Exemplo:

div {
   width: 500px;
   height: 500px;
   background: url('suaimagem.jpg') no-repeat center center;
   background-size: cover;
}

Abraços!

[Tiago j.a 0]

Obrigado pela resposta L. Henrique

No caso acima, este trecho abaixo estaria significando que em telas com o tamanho máximo de 768px, as imagens teriam o tamanho X?

Se for isto, poderia no meu caso colocar que em telas com no min-width "X", as imagens seriam max-width "Y"?

@media screen and (max-width: 768px) {

Obrigado novamente

[L. Henrique 179]

Tiago,

Exato. Os elementos terão propriedades X enquanto a tela não ultrapassar 768px de largura. Quanto a sua outra dúvida, não consegui compreende-la totalmente. Poderia esclarecer?

Abraços!