确保 div 父级包裹 img 子级

Question

我正在为我的应用构建“调整图像大小”功能。但是在设置它时，我遇到了让元素的可拖动手柄干净地环绕图像的困难，如下所示：

使用我的代码，似乎 div 的大小是基于窗口而不是图像。

这是我目前的代码，您可以在 Stackblitz here 上看到它的实际效果：

index.html

<figure class="figure mb-4 mt-2 text-center">
  <app-resize-container>
    <img
      class="figure-img rounded"
      src="https://picsum.photos/seed/picsum/600/600"
      style="margin: 0px;"
    />
  </app-resize-container>
  <figcaption [style.marginTop.em]="1" class="figure-caption text-center">
    Test
  </figcaption>
</figure>

resize-container.component.html

<div class="resize-container">
  <div class="resize-container-handler">
    <div
      *ngFor="let resizeCornerSetting of resizeCornerSettings; let i = index"
      [ngClass]="resizeCornerSetting.class"
    >
      <div class="resize-corner-handle">
        <div class="resize-element-size-container"></div>
      </div>
    </div>
    <ng-content></ng-content>
  </div>
</div>

resize-container.component.ts

import { Component, Input } from '@angular/core';
import { IResizeCornerSettings } from './course-content-element-item-resize-container';

@Component({
  selector: 'app-course-content-element-item-resize-container',
  templateUrl: './course-content-element-item-resize-container.component.html',
  styleUrls: ['./course-content-element-item-resize-container.component.css'],
})
export class CourseContentElementItemResizeContainerComponent {
  @Input() width: number | undefined | null;
  resizeCornerSettings: IResizeCornerSettings[] = [
    {
      position: ['top', 'left'],
      class: 'resize-corner-container resize-corner-top-left',
    },
    {
      position: ['top', 'right'],
      class: 'resize-corner-container resize-corner-top-right',
    },
    {
      position: ['bottom', 'left'],
      class: 'resize-corner-container resize-corner-bottom-left',
    },
    {
      position: ['bottom', 'right'],
      class: 'resize-corner-container resize-corner-bottom-right',
    },
  ];
}

resize-container.component.css

.resize-container {
  text-align: center;
  border: 2px solid #335eea !important;
}

.resize-container-handler {
  z-index: 3;
  overflow: visible;
  min-inline-size: max-content;
  min-width: 30px;
  min-height: 30px;
  will-change: width, height, transform;
}

.resize-corner-container {
  height: 30px;
  width: 30px;
  position: fixed;
  pointer-events: auto;
  display: flex;
}

.resize-corner-handle {
  width: 12px;
  height: 12px;
  border-radius: 8px;
  box-shadow: 0 0 5px 1px rgba(14, 19, 24, 0.15),
    0 0 0 1px rgba(14, 19, 24, 0.2);
  position: relative;
  background: #fff;
  display: flex;
  margin: auto;
  z-index: 1;
}

.resize-corner-top-right {
  z-index: 1;
  top: -15px;
  right: -15px;
  cursor: nesw-resize;
}

.resize-corner-top-left {
  z-index: 1;
  top: -15px;
  left: -15px;
  cursor: nwse-resize;
}

.resize-corner-bottom-right {
  z-index: 1;
  bottom: -15px;
  right: -15px;
  cursor: nwse-resize;
}

.resize-corner-bottom-left {
  z-index: 1;
  bottom: -15px;
  left: -15px;
  cursor: nesw-resize;
}

Answer 1

您只是在父 div .resize-container 和 .resize-container-handler 上缺少 display: inline-block;。只需添加display: inline-block 即可开始工作。

.resize-container {
  text-align: center;
  border: 2px solid #335eea !important;
  display: inline-block; /*Added this */
}

.resize-container-handler {
  z-index: 3;
  overflow: visible;
  min-inline-size: max-content;
  min-width: 30px;
  min-height: 30px;
  will-change: width, height, transform;
  display: inline-block; /*Added this */
}

见here