Mantenha a proporção original em uma imagem em miniatura

Estou usando um tamanho de miniatura de 100 * 60 no meu blog, mas às vezes eu quero usar imagens quadradas.

É possível usar um plugin do WordPress ou CSS para torná-lo adequado ao adicionar fundo nos lados para manter a proporção original da imagem?

Exemplo:

  1. Tamanho da imagem original: 120 x 120
  2. Adicione um fundo extra branco / transparente para torná-lo na proporção de miniaturas: 200×120, portanto, 40 pixels à direita e à esquerda na imagem original para que seja centrado
  3. Reduza o tamanho da imagem de 200 * 120 a 100 * 60.

Solutions Collecting From Web of "Mantenha a proporção original em uma imagem em miniatura"

Referência CSS: o background-size pode esticar uma imagem de fundo proporcionalmente, usando a cover ou contain . Confira esta demonstração .

HTML

 

CSS

 .rec, .square { border: solid red 1px; background-color:black; background: url("https://placeholdit.imgix.net/~text?txtsize=23&txt=120×120&w=120&h=120"); background-size:contain; background-repeat: no-repeat; background-position: center; } .rec { width:100px; height:60px; } .square { width:100px; height:100px; } 

O espaço restante com conteúdo será transparente, então basta colocá-lo em um recipiente com um conjunto de colors de fundo.