ruicesar/rx.scoreodonto.com
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(transform): imagens não cortadas nas 4 posições (70%=1/√2) e no ajuste fino (sem overflow hidden)
continuous-integration/webhook Deploy concluído (VPS4)
Details

Browse Source
This commit is contained in:
VPS 4 Deploy Agent
2026-05-30 21:26:48 +02:00
parent ca74ccf0d4
commit 3f3e5fc33b
2 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dental-server/dental-client/src/components/TransformModal.jsx
+3 -2
View File
@@ -314,12 +314,13 @@ export default function TransformModal({ isOpen, onClose, image, onSaved }) {
onMouseLeave={(e) => (e.currentTarget.style.borderColor = 'var(--glass-border)')}
title={`Usar ${deg}° ${pg.flipH ? '(espelho H)' : pg.flipV ? '(espelho V)' : ''}`}
>
<div style={{ width: '100%', aspectRatio: '1 / 1', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
{/* max 70% = 1/√2: garante que ao rotacionar 90° a imagem cabe no quadrado sem cortar */}
<div style={{ width: '100%', aspectRatio: '1 / 1', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<img
src={imageUrl}
alt={`${deg}°`}
loading="lazy"
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', transform: cssTransform(deg, pg.flipH, pg.flipV) }}
style={{ maxWidth: '70%', maxHeight: '70%', objectFit: 'contain', transform: cssTransform(deg, pg.flipH, pg.flipV), transformOrigin: 'center' }}
/>
</div>
<span style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--text-secondary)' }}>
dental-server/dental-client/src/index.css
+3 -2
View File
@@ -419,8 +419,9 @@ body {
}
.panel-title { font-size: 1rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 16px; }
.transform-panel .img-container { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; border-radius: var(--radius-sm); }
.transform-panel img { max-width: 100%; max-height: 300px; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: block; }
/* overflow: visible para não cortar imagens rotacionadas */
.transform-panel .img-container { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px; box-sizing: border-box; }
.transform-panel img { max-width: 100%; max-height: 320px; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: block; }
.transform-sidebar {
width: 80px; display: flex; flex-direction: column;