html将div中的画布居中,而不拉伸画布

Question

我有一个像:

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

它以画布为中心,但画布正在拉伸.

我不希望画布被拉伸.

我想让它在不拉伸的情况下居中.如果画布水平居中,则水平居中,垂直居中,然后如此.

Answer 1

删除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