HTML центр холста внутри DIV без натяжки холста

У меня есть HTML, как:HTML центр холста внутри DIV без натяжки холста

.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>

Он центрирования холст, но холст растяжения.

Я не хочу, чтобы холст был растянут.

Я хочу, чтобы он был центрирован без растяжки. Если холст горизонтально расположен по горизонтали и вертикали, то и так далее.

источник

2016-09-27 aryan

Ваш часто задаваемый вопрос. Если вы хотите избежать растягивания при изменении размера с помощью CSS, давайте размер холста ** пропорционально пропорционален **, установив либо не ширину, либо высоту. Кроме того, установите ширину и высоту элемента холста, и никакие пиксели не будут растянуты. Опять же, это часто задаваемый вопрос о Stackoverflow, так что поиск Stackoverflow для более подробной информации. – markE

Удалить Position: absolute; и translate

Добавьте ширину вашего canvas и положить margin: 0 auto;, Надежда, что помогает.

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>

Проверить здесь: https://stackoverflow.com/a/7782251/5336321

источник

2016-09-27 05:04:33

Это простирается на холсте ... – Kaiido

@ Кайдо проверить ответ прямо сейчас! –

Я хочу сосредоточить его по горизонтали и по вертикали .. Я думаю, что он центрируется только по горизонтали, а не по вертикали. – aryan

Это должно быть достаточно, чтобы изменить position к absolute, а также добавить определения ширины/высоты для всех родительских элементов (также html и 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>

источник

2016-09-27 10:32:13 Johannes

HTML центр холста внутри DIV без натяжки холста

ответ

Смежные вопросы