div 使用内部内容调整大小并保持宽高比

Question

我做了一个代码笔示例，为了完整理解请查看这个link https://codepen.io/hasan-irshad/pen/bGpPZzB

这是我在右下角使用的代码

if (currentResizer.classList.contains('bottom-right')) {
    const width = original_width + (e.pageX - original_mouse_x);
    const height = original_height + (e.pageY - original_mouse_y)
    if (width > minimum_size) {
      element.style.width = width + 'px'
      element.style.height = 'max-content';
      let Textdiv = document.getElementById('Text');
      let relFontsizew = Textdiv.offsetWidth * 0.25;
      Textdiv.style.fontSize = relFontsizew + 'px';
    }
  }

如果您从右下角调整 div 的大小，它可以正常工作，因为我希望它可以工作，根据鼠标-X，从右下角调整 increases/decreases 宽度 div , 高度为 div 根据内部内容的高度。这是我想在所有角落实施的行为。

例如，如果我从右下角拖动，那么左上角就会停留在它的位置就像这样，如果我从右上角调整它的大小，那么左下角应该保持它的位置。

预期行为 1 外部元素的宽度应取决于 mouse-X 2 字体大小应取决于外部 div 的宽度 3 外部高度 div 应取决于内部内容高度 4 div 元素不应该失去它的位置

下面是一个 link 视频，用于演示我要实现的最终结果。 drive.google.com/file/d/1Wgh3GhEOhv1syk_WFmcCGp0UJUyGzS5u/view

有人可以帮我完成这个任务吗？

非常感谢!!!!!

Answer 1

我把不需要的东西注释掉了，把应该加的东西插进去了，主要是不需要设置真实位置，需要设置高度为“max-content”，并且您唯一一次添加脚本来更改 font-size 是在 right-bottom 角落。

          let Textdiv = document.getElementById('Text');
          let relFontsizew = Textdiv.offsetWidth * 0.25;
          Textdiv.style.fontSize = relFontsizew + 'px';

/*Make resizable div by Hung Nguyen*/


function makeResizableDiv(div) {
  const element = document.querySelector(div);
  const resizers = document.querySelectorAll(div + ' .resizer')
  const minimum_size = 20;
  let original_width = 0;
  let original_height = 0;
  let original_x = 0;
  let original_y = 0;
  let original_mouse_x = 0;
  let original_mouse_y = 0;
  for (let i = 0;i < resizers.length; i++) {
    const currentResizer = resizers[i];
    currentResizer.addEventListener('mousedown', function(e) {
      e.preventDefault()
      original_width = parseFloat(getComputedStyle(element, null).getPropertyValue('width').replace('px', ''));
      original_height = parseFloat(getComputedStyle(element, null).getPropertyValue('height').replace('px', ''));
      original_x = element.getBoundingClientRect().left;
      original_y = element.getBoundingClientRect().top;
      original_mouse_x = e.pageX;
      original_mouse_y = e.pageY;
      window.addEventListener('mousemove', resize)
      window.addEventListener('mouseup', stopResize)
    })
    
    function resize(e) {
      if (currentResizer.classList.contains('bottom-right')) {
        const width = original_width + (e.pageX - original_mouse_x);
        const height = original_height + (e.pageY - original_mouse_y)
        if (width > minimum_size) {
          element.style.width = width + 'px'
          element.style.height = 'max-content';
          let Textdiv = document.getElementById('Text');
          let relFontsizew = Textdiv.offsetWidth * 0.25;
          Textdiv.style.fontSize = relFontsizew + 'px';
        }
      }
      else if (currentResizer.classList.contains('bottom-left')) {
        const height = original_height + (e.pageY - original_mouse_y)
        const width = original_width - (e.pageX - original_mouse_x)
        if (height > minimum_size) {
          element.style.height = "max-content"
        }
        if (width > minimum_size) {
          element.style.width = width + 'px'
          element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'
          let Textdiv = document.getElementById('Text');
          let relFontsizew = Textdiv.offsetWidth * 0.25;
          Textdiv.style.fontSize = relFontsizew + 'px';
        }
      }
      else if (currentResizer.classList.contains('top-right')) {
        const width = original_width + (e.pageX - original_mouse_x)
        const height = original_height - (e.pageY - original_mouse_y)
        if (width > minimum_size) {
          element.style.width = width + 'px'
          element.style.height = "max-content"
          //element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'
          let Textdiv = document.getElementById('Text');
          let relFontsizew = Textdiv.offsetWidth * 0.25;
          Textdiv.style.fontSize = relFontsizew + 'px';
        }
      }
      else {
        const width = original_width - (e.pageX - original_mouse_x)
        const height = original_height - (e.pageY - original_mouse_y)
        if (width > minimum_size) {
          element.style.width = width + 'px'
          element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'
        }
        if (height > minimum_size) {
          element.style.height = "max-content"
          //element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'
        }
         let Textdiv = document.getElementById('Text');
          let relFontsizew = Textdiv.offsetWidth * 0.25;
          Textdiv.style.fontSize = relFontsizew + 'px';
      }
    }
    
    function stopResize() {
      window.removeEventListener('mousemove', resize)
    }
  }
}

makeResizableDiv('.resizable')

body,
html {
  background: black;
}
.resizable {
  background: white;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 100px;
  left: 100px;
}

.resizable .resizers{
  width: 100%;
  height: 100%;
  border: 3px solid #4286f4;
  box-sizing: border-box;
}

.resizable .resizers .resizer{
  width: 10px;
  height: 10px;
  border-radius: 50%; /*magic to turn square into circle*/
  background: white;
  border: 3px solid #4286f4;
  position: absolute;
}

.resizable .resizers .resizer.top-left {
  left: -5px;
  top: -5px;
  cursor: nwse-resize; /*resizer cursor*/
}
.resizable .resizers .resizer.top-right {
  right: -5px;
  top: -5px;
  cursor: nesw-resize;
}
.resizable .resizers .resizer.bottom-left {
  left: -5px;
  bottom: -5px;
  cursor: nesw-resize;
}
.resizable .resizers .resizer.bottom-right {
  right: -5px;
  bottom: -5px;
  cursor: nwse-resize;
}

<div class='resizable'>
  <div class='resizers'>
    <div class='resizer top-left'></div>
    <div class='resizer top-right'></div>
    <div class='resizer bottom-left'></div>
    <div class='resizer bottom-right'></div>
    <article id="Text" style=" width:100%; font-size:22px; color:black">Any Text</article>
  </div>
  
</div>

div 使用内部内容调整大小并保持宽高比

div Resizing with inner content and maintain aspect ratio

html

javascript

css

resize