AEM Dynamic Media: mantenha a proporção ao redimensionar imagens

Este artigo explica como garantir que a entrega de imagens do Adobe Experience Manager Dynamic Media preserve a proporção original ao redimensionar imagens usando parâmetros de largura e altura.

Descrição description

Ambiente

Adobe Experience Manager Dynamic Media (todas as versões)

Sintomas

Ao fornecer imagens por meio do ponto de extremidade OpenAPI do Dynamic Media e especificar os parâmetros de consulta width e height, a imagem retornada não preserva a taxa de proporção original. Em vez disso, a imagem de saída é forçada em um quadrado ou usa a dimensão menor para largura e altura, resultando em dimensionamento inesperado. Isso ocorre mesmo quando as dimensões originais do ativo não são quadradas.

Exemplo:

  • Dimensões originais do ativo: 2336 × 2400 (imagem/webp)
  • Solicitações e resultados observados:
  • ?width=1000 → 1000 × 1000
  • ?height=1000 → 1000 × 1000
  • ?width=1000&height=500 → 500 × 500
  • ?width=1500&height=500 → 500 × 500

Comportamento esperado: A imagem deve ser redimensionada para caber dentro da caixa delimitadora solicitada, mantendo a proporção original (por exemplo: 2336 × 2400 dimensionada proporcionalmente para caber dentro de 1000 × 500).

Comportamento observado: a saída da imagem é quadrada ou não corresponde à taxa de proporção esperada, independentemente das dimensões originais.

Referências:

Resolução resolution

Siga as etapas abaixo para resolver o problema:

  1. Revise a URL de entrega da imagem e verifique se você está especificando os parâmetros width e height desejados.

  2. Para preservar a taxa de proporção original e ajustar a imagem dentro da caixa delimitadora solicitada, anexe o parâmetro fit=contain à URL de entrega.

  3. Teste o URL atualizado em um navegador ou cliente da API. A imagem retornada agora deve se ajustar às dimensões especificadas, mantendo sua proporção original (por exemplo: 487 × 500 para uma imagem de 2336 × 2400 dimensionada para se ajustar a 1000 × 500).

  4. Consulte a documentação oficial para obter mais detalhes sobre os parâmetros compatíveis:

recommendation-more-help
experience-cloud-kcs-help-kbarticles