html - 调整页面大小时图像向左或向右移动

Question

我在 HTML 中插入了一张图片并使用 CSS 设置了样式，但是当我调整页面大小时，图片只是向左或向右移动。我希望它保持相同的位置。

.imagee {position:relative}

.circle {
  border-radius: 50%;
  width: 300px;
  height: 300px;
  margin:0 auto;
  transform: translate(-345px, 0px);
}

<div class="imagee">
<img class="circle" src="https://dummyimage.com/600x400/000/fff" align="right" />
</div>

Answer 1

尝试对父 div 使用 flex 并删除 transform: translate(-345px, 0px);

.imagee {position:relative;width:100%;display:flex;justify-content:left;align-items:center;}

.circle {
  border-radius: 50%;
  width: 300px;
  height: 300px;
}

<div class="imagee">
<img class="circle" src="https://dummyimage.com/600x400/000/fff" align="right" />
</div>