Ensure div parent wraps img child-CodePudding

I'm building a "resize image" feature for my app. However in setting it up, I am running into difficulties getting the draggable handles of the element to cleanly wrap around the image, like this:

With my code, it seems like the size of the div is based on thewindow and not the image.

This is my code so far, you can see it in action on 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;
}

CodePudding user response：

You are just missing display: inline-block; on parent divs .resize-container and .resize-container-handler. Just add display: inline-block and it will start working.

.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 */
}

See here