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調整大小時伸展，請讓canvas **按比例調整大小**，方法是設置寬度和高度中的任一個，但不是寬度和高度。或者，設置畫布元素的寬度和高度，並且不會延伸像素。再次，這是一個經常被問到的關於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

@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內畫布而不拉伸的畫布

回答

相關問題