html - 我想在屏幕中间调整内容框的大小

Question

我试图做到这一点，以便在调整网络浏览器大小时，调整页面上内容框的大小，但从页面中间而不是边缘开始调整大小。我有要调整大小的内容框，只需要帮助让它们从中间调整大小。

#getting-started {
  width: 1400px;
  margin: 0 auto;
  background-color: #9599b8;
  border: solid 1.5px #1f2a7f;
  border-radius: 15px;
  margin-top: 16px;
  margin-bottom: 16px;
  align-items: center;
  max-width: 100%;
}

<div id="getting-started">
  <h1>Li Europan lingues</h1>
  <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.</p>
  <p>At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p>
  <p>It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
</div>

我希望它从左侧开始调整大约 25% 的大小。

Answer 1

检查这个我使用了属性 resize 属性 定义了元素是否(以及如何)调整大小 检查这个代码..我塑造它希望它对你有帮助因为它按等比例调整大小

#getting-started {
width: auto;
margin: 0 auto;
background-color: #9599b8;
border: solid 1.5px #1f2a7f;
border-radius: 15px;
margin-top: 16px;
  resize: both;
  overflow: auto;
margin-bottom: 16px;
align-items: center;
max-width: 100%;}

<div id="getting-started">
<p>Let the user resize both the height and the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

看看对你有帮助