centrum html płótno wewnątrz div bez rozciągania płótna

Question

Mam HTML, takich jak:

.image-detail { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
    position: relative; 
 
} 
 
canvas { 
 
    display: block; 
 
} 
 
.image-detail-canvas { 
 
    -moz-user-select: none; 
 
    -webkit-user-select: none; 
 
    max-width: 100% !important; 
 
    max-height: 100% !important; 
 
    position: absolute !important; 
 
    left: 50% !important; 
 
    top: 50% !important; 
 
    transform: translate(-50%, -50%) !important; 
 
}

<div class="image-detail"> 
 
    <canvas class="image-detail-canvas" id="image-canvas"> 
 

 
    </canvas> 
 
</div>

Jest centrowania płótno ale płótno rozciągania.

Nie chcę, aby płótno było rozciągnięte.

Chcę, aby był wyśrodkowany bez rozciągania. Jeśli płótno jest ustawione poziomo, to poziomo i pionowo.

Answer 1

Usuń Position: absolute; i translate

Dodać trochę szerokości do swojej canvas i umieścić margin: 0 auto;, nadzieję, że pomoże.

canvas { 
 
    border: 1px solid; 
 
    padding: 0; 
 
    margin: auto; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.image-detail-canvas { 
 
    -moz-user-select: none; 
 
    -webkit-user-select: none; 
 
    max-width: 100% !important; 
 
    max-height: 100% !important; 
 
}

<div class="image-detail"> 
 
    <canvas class="image-detail-canvas" id="image-canvas" width="100" height="100"> 
 

 
    </canvas> 
 
</div>

Sprawdź tutaj: https://stackoverflow.com/a/7782251/5336321

Answer 2

powinny być wystarczające, aby zmienić position do absolute, plus dodać definicje szerokość/wysokość wszystkich elementów nadrzędnych (również html i body):

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.image-detail { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
    position: relative; 
 
} 
 
canvas { 
 
    border: 1px solid; 
 
    display: block; 
 
} 
 
.image-detail-canvas { 
 
    position: relative; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="image-detail"> 
 
    <canvas class="image-detail-canvas" id="image-canvas" width="100" height="100"> 
 

 
    </canvas> 
 
</div>