html将div放在div内部而不拉伸画布

Question

我有一个类似的HTML：

.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;，希望有所帮助。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

  </canvas>
</div>

＆＃13;

＆＃13;

＆＃13;

点击此处：https://stackoverflow.com/a/7782251/5336321

Answer 2

将position更改为absolute，并将宽度/高度定义添加到所有父元素（也是html和body）就足够了：

＆＃13;

＆＃13;

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%);
}

＆＃13;

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

  </canvas>
</div>

＆＃13;

＆＃13;

＆＃13;