Html - How to properly position img with resize handlers

Mercer
August 1, 2023
260 views
0 votes
2 Answers

I want to create a container which will contain an image with horizontal and vertical resizers. Additioanlly, I would like to be able to postion the figure within this container (left, right, center, float left, float right). Here I my code:

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

.img-container {
  width: fit-content;
  display: flex;
  position:relative
}
.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;
}

<article class="container">
  <span class="span">
    <div class="img-container">
      <img src="https://www.copahost.com/blog/wp-content/uploads/2019/07/imgsize2.png" width=25%>

      <div class="horizontal-resize-handle"></div>
      <div class="vertical-resize-handle"></div>
   
    </div>
  </span>
</article>

Unfortunately the handlers dont’ fit the image (cover te entire page) and the positioning using justify-content in conteiner class doesnt work too. What should I change?

Tags: css html

Answers

try this

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

.img-container {
  width: fit-content;
  display: flex;
  position: absolute;
  resize: both;
  overflow: auto;
}

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

/* Positioning classes */
.position-left {
  left: 0;
}

.position-right {
  right: 0;
}

.position-center {
  left: 50%;
  transform: translateX(-50%);
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

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

First, you cannot nest a block-element inside a inline-element. Block elements take up the entire width of the page, while inline-elements don’t.

Secondly, in your html, you set the width of the image to 25%, so that should be the width of your .vertical-resize-handle. For your .horizontal-resize-handle, you could set how far it should be. Whether from the left or from the right is your choice, in this situation, how far from the left would be easier. You need to push the .horizontal-resize-handle to the left, by the width of the image: left: 25%;, but that pushes the left edge of the handle to the right edge of the image. But we want the right edges to be on top of each other. So you minus the width of the handle from it: left: calc(25% - 0.5rem) /* 0.5rem is the width of the resize handle */

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

.img-container {
  width: fit-content;
  display: flex;
  position:relative
}
.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;
        left: calc(25% - 0.5rem);
        cursor: col-resize;
}

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

<article class="container">
  <div class="span">
    <div class="img-container">
      <img src="https://www.copahost.com/blog/wp-content/uploads/2019/07/imgsize2.png" width=25%>

      <div class="horizontal-resize-handle"></div>
      <div class="vertical-resize-handle"></div>
   
    </div>
  </div>
</article>

If you want the bars outside of the image, then just increase the distance to the image by the width of the handles:

horizontal-resize-handle:

left: calc(50% - 0.5rem + 0.5rem); "-" and "+" would cancel out and it would become left: 50%;

vertical-resize-handle:

For your vertical-handle you use bottom: 0;, since you use bottom, we can’t add the height of the handle. Since we would do top: currentDistance + 0.5rem for top: we need to do the inverse if we use bottom, which is bottom: currentDistance - 0.5rem. And if currentDistance is 0, then we can just write -0.5rem

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

.img-container {
  width: fit-content;
  display: flex;
  position:relative
}
.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;
        left: 25%;
        cursor: col-resize;
}

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

<article class="container">
  <div class="span">
    <div class="img-container">
      <img src="https://www.copahost.com/blog/wp-content/uploads/2019/07/imgsize2.png" width=25%>

      <div class="horizontal-resize-handle"></div>
      <div class="vertical-resize-handle"></div>
   
    </div>
  </div>
</article>

This might be useful, if you are looking into the differences between flex, inline and block.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to properly position img with resize handlers

Answers

horizontal-resize-handle:

vertical-resize-handle: