確保div父級包裝img子級

我正在為我的應用程式構建“調整影像大小”功能。然而，在設定它時，我遇到了讓元素的可拖動句柄干凈地環繞影像的困難，如下所示：

使用我的代碼，div 的大小似乎基于視窗而不是影像。

到目前為止，這是我的代碼，您可以在此處在 Stackblitz 上看到它的運行情況：

索引.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;
}

uj5u.com熱心網友回復：

您只是缺少display: inline-block;父 div.resize-container和.resize-container-handler. 只需添加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 */
}

看這里

標籤：javascript html css 有角的 打字稿

上一篇：在HTML表單中“必需”屬性不起作用

下一篇：在Chrome上使用自定義滾動條樣式時，下角會出現一個白色方塊。如何消除這種情況？