html merkezi ben gibi bir html var tuval

zorlamadan bir div içinde bir tuval:html merkezi ben gibi bir html var tuval

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

O tuval ortalama ancak tuval germe edilir.

Tuvalin gerilmesini istemiyorum.

Gerilmeden ortalanmasını istiyorum. Kanvas yatay merkez ise yatay ve dikey ise o zaman.

kaynak

2016-09-27 aryan

Sizinki sık sorulan bir sorudur. CSS ile yeniden boyutlandırırken esnemekten kaçınmak istiyorsanız, tuvalin ** genişlik ve yükseklikten ikisini de ayarlayarak ** orantılı olarak ** yeniden boyutlandırmasını sağlayın. Alternatif olarak, tuval öğesi genişliğini ve yüksekliğini ayarlayın ve hiçbir piksel gerilmeyecektir. Yine, bu Stackoverflow üzerinde sık sorulan bir soru yani daha fazla bilgi için Stackoverflow'ı arayın. – markE

Kaldır Position: absolute; ve

translate senin canvas bazı genişliği ekleyin ve yardımcı margin: 0 auto;, Umut koydu. Burada

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>

ara: https://stackoverflow.com/a/7782251/5336321

kaynak

2016-09-27 05:04:33

Bu, tuvali gerer ... – Kaiido

@Kaiido cevabı şimdi kontrol edin! –

Yatay ve dikey olarak ortalamak istiyorum. Dikey olarak dikey olarak değil sadece yatay olarak ortalıyor sanırım – aryan

absolute için position değiştirmek için yeterli olabilir ve tüm üst elemanları (ayrıca html ve body) için genişlik/yükseklik tanımları eklemek gerekir:

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>

kaynak

2016-09-27 10:32:13 Johannes

html merkezi ben gibi bir html var tuval

cevap

İlgili konular