Teste de Modal Preview
Validação de responsividade da imagem no modal
Como testar:
- Clique em qualquer imagem abaixo para abrir o modal
- Verifique se a imagem NUNCA ultrapassa a largura do modal
- Redimensione a janela do navegador (ou use F12 → Device Toolbar)
- Teste em diferentes resoluções: Desktop, Tablet e Mobile
- Abra o DevTools (F12) e vá em "Elements" para inspecionar o CSS aplicado
- Verifique se há scroll horizontal no modal (não deve ter!)
Configurações CSS aplicadas:
- Modal Container:
max-width: 90vw !important - Modal Content:
overflow: hidden !important - Modal Body:
box-sizing: border-box !important - Imagem:
max-width: 100% !important+object-fit: contain - Wrapper:
#previewModal .modal-body > * { max-width: 100% !important }
Breakpoints configurados:
- Desktop (> 768px): Modal
90vw, Imagem85vh - Tablet (≤ 768px): Modal
98vw, Imagem70vh - Mobile (≤ 576px): Modal
100vw, Imagem60vh
Imagens de Teste
Clique em qualquer imagem para testar o modal:
Paisagem Larga
1920x1080Retrato Alto
1080x1920Quadrada
1500x1500Ultra Larga
2560x14404K Ultra HD
3840x2160Panorâmica
3000x1000O que validar:
- ✅ CORRETO: A imagem fica completamente dentro do modal, sem ultrapassar as bordas
- ✅ CORRETO: Não aparece scroll horizontal no modal
- ✅ CORRETO: A imagem mantém suas proporções originais
- ✅ CORRETO: O modal se ajusta ao redimensionar a janela
- ❌ INCORRETO: A imagem ultrapassa a largura do modal
- ❌ INCORRETO: Aparece scroll horizontal
- ❌ INCORRETO: A imagem fica distorcida
Resultado do Teste:
Após testar todas as imagens, informe: