Dynamically place resize handles based on image size

I am in the process of creating resize handles for my image element. However, the … Read more Dynamically place resize handles based on image size

I am in the process of creating resize handles for my image element. However, the resize handles aren’t positioned correctly (there seems to be a white gap on the right hand side and bottom). What’s the best way of having them placed on the four corners of every image no matter the size.

My code is below and can be seen in full at: https://stackblitz.com/edit/angular-ivy-fretg7.

app.component.html

<app-resize-container>
  <img
    class="figure-img rounded"
    src="https://picsum.photos/seed/picsum/400/400"
  />
</app-resize-container>

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.css

.resize-container {
  border: #00eae4 2px solid;
}

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

.resize-corner-container {
  height: 30px;
  width: 30px;
  position: absolute;
  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: 501;
}

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

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

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

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

Source: CSS – Stack Overflow


Categories: NewsTags: ,

Tags: ,


Leave a Reply

Your email address will not be published. Required fields are marked *