如何正确定位带调整大小手柄的图片并修复布局问题？

问题原因及修改点 #

1. 调整手柄未贴合图片

• 根源：原HTML用行内元素<span>包裹块级元素<div>违反规范，导致布局异常；img的width=25%相对视口而非父容器，使得img-container尺寸无法贴合图片，绝对定位的手柄因此错位。
• 修改：
  • 移除多余的<span>标签，避免行内元素嵌套块级元素的语法错误。
  • 将img-container的display改为inline-block，让容器尺寸完全贴合图片；给img添加display:block，消除图片下方的基线空白。

2. container的justify-content定位无效

• 根源：原<span>作为flex容器的子元素，因内部块级元素被强制撑开为满宽，justify-content:center无法体现对齐效果。
• 修改：移除<span>后，img-container作为flex子元素，宽度由图片尺寸决定，此时justify-content:center会正常生效。

修改后的完整代码 #

CSS

.container {
  display: flex;
  justify-content: center;
  position: relative;
}

.img-container {
  position: relative;
  display: inline-block;
}

.img-container img {
  display: block;
  width: 25%;
}

.horizontal-resize-handle,
.vertical-resize-handle {
  position: absolute;
  z-index: 50;
  opacity: 0.5;
  background-color: blue;
}

.horizontal-resize-handle {
  height: 100%;
  width: 0.5rem;
  top: 0;
  right: 0;
  cursor: col-resize;
}

.vertical-resize-handle {
  width: 100%;
  height: 0.5rem;
  bottom: 0;
  left: 0;
  cursor: row-resize;
}

HTML

<article class="container">
  <div class="img-container">
    <img src="https://www.copahost.com/blog/wp-content/uploads/2019/07/imgsize2.png">
    <div class="horizontal-resize-handle"></div>
    <div class="vertical-resize-handle"></div>
  </div>
</article>

扩展：实现多种定位效果 #

• 左对齐：修改.container的justify-content: flex-start;
• 右对齐：修改.container的justify-content: flex-end;
• 左浮动：将.container改为display: block;，给.img-container添加float: left;
• 右浮动：将.container改为display: block;，给.img-container添加float: right;

内容的提问来源于stack exchange，提问作者Mercer