html - 上传的图像未以 Safari 为中心

Question

我从用户上传图像并将其显示在我的页面上。我还有一个画布，用来在图像上标记线条。我希望将图像显示在与中心画布相同的位置。现在图像图像显示从中心开始。该问题在 Firefox 和 Chrome 上不存在，而仅在 Safari 上。我在这个项目中也使用了 materialize.css。如何在精确的中心显示图像？

    <style>
      .image {
        position: absolute;
        z-index: 1;
      }
      .container {
        display: inline-block;
        margin: 0 auto;
        position: relative;
        width: 100%;
      }
      .canvas {
        position: relative;
        z-index: 20;
      }
    </style>


    <div class="container">
      <img
        width="400"
        height="400"
        class="image"
      />
      <canvas width="400" height="400" class="canvas" />
    </div>

红色的东西是我的形象

标签： htmlcssimagesafari

Answer 1

有很多方法可以使图像居中。在你的情况下，我建议使用display: block; margin: 0 auto;并给它一个max-width: 400px; width: 100%;，这样图像总是保持纵横比并且不会比你想要的大。

如果您使用width: 400px，当它到达宽度较小的设备（手机）时，它会使页面滚动，这是不好的用户体验。此外，您通常不需要height: 400px. 添加实际图像时，让图像自动填充高度。

此外，避免将样式放在标记上。所有样式都应该在 CSS 中进行组织。

研究通过课程学习 HTML/CSS 的基础知识。是否使用 Bootstrap、Materialize、Bulma 等并不重要。这一切都归结为基础。

.image {
        display: block;
          margin: 0 auto;
          max-width: 400px;
          width: 100%;
          height: 400px;
          border: 1px solid lightgray;
      }

在此处检查 codepen 上的代码。