主页 / 问题 / 1252576
Accepted
Sevastopol'
Asked:2022-03-07 02:51:20 +0000 UTC2022-03-07 02:51:20 +0000 UTC

调整父元素大小时按比例调整子元素的大小（完全响应的正方形）

  • 772

我们有以下HTML+CSS代码：

function parentH() {
  let height = document.querySelector('#parent_range_H').value + 'px';
  document.querySelector('#parent').style.height = height;
  document.querySelector('#children').style.height = height;
}

function parentW() {
  let width = document.querySelector('#parent_range_W').value + 'px';
  document.querySelector('#parent').style.width = width;
  document.querySelector('#children').style.width = width;
}
#parent {
  width: 300px;
  height: 300px;
  padding: 10px;
  border: 5px solid red;
}

#children {
  width: 100%;
  height: 100%;
  background: green;
}
<p>Изменяем высоту (H) родителя: <input id="parent_range_H" type="range" min="10" max="300" value="300" step="1" name="parent_h" oninput="parentH()"></p>
<p>Изменяем ширину (W) родителя: <input id="parent_range_W" type="range" min="10" max="300" value="300" step="1" name="parent_w" oninput="parentW()"></p>

<div id="parent">
  <div id="children"></div>
</div>

父元素<div id="parent">具有相同的宽度300px和高度尺寸300px，形成一个正方形。子元素的尺寸是其父元素尺寸<div id="children">的百分比（宽度 -100%和高度 - ），完全填满其所有空间，也形成一个正方形。100%当更改父元素的大小时，子元素会自动减小其大小，调整到其父元素的大小，从而违反其比例 - 正方形。

问题：在调整父元素的大小时，如何按比例调整子元素的大小？子元素必须是完全响应的正方形，并且对于父元素的高度或宽度的任何变化，子元素 - 正方形 - 必须始终保持为正方形。解决这个问题有哪些选择？

javascript

4 个回答

  1. Best Answer

    问题：调整父元素的大小时，如何按比例调整子元素的大小？子元素必须是完全响应的正方形，并且对于父元素的高度或宽度的任何变化，子元素 - 正方形 - 必须始终保持为正方形。解决这个问题有哪些选择？

    简短的回答：

    最简单的方法是使用最适合此任务的 SVG。

    • 让我们从一个基本示例开始，为了便于理解，我们排除了viewBox对缩放和定位的影响。它将等于width, heightSVG。
      所以这个例子中的比例是1:1
      AND 正方形将填充 SVG 的所有内部空间。

    注意：
    红色边框是SVG
    的边框绿色边框是父容器的边框（在进一步的例子中）

    <div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="100" height="100" viewBox="0 0 100 100" style="border:1px solid red;">  
         
<rect id="R1" x="0" y="0" width="100" height="100" rx="15" fill="silver" stroke="black" />
</svg>
</div>  
<script> 
console.log(R1.getBBox())
</script>

    JS 方法getBBox()计算围绕正方形的框架的物理尺寸100х100px，也就是说，在我们的例子中，这些将是正方形本身的尺寸

    1.添加父容器200х200px

    由于 SVG 具有固定尺寸，因此它不会缩放并适合其父容器。100х100px

    .container{
width:200px;
height:200px;
outline:1px solid green;
}
    <div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="100" height="100" viewBox="0 0 100 100" style="border:1px solid red;">  
         
<rect id="R1" x="0" y="0" width="100" height="100" rx="15" fill="silver" />
</svg>
</div>  
<script> 
console.log(R1.getBBox())
</script>

    2.父容器.container{width:300px; 高度：150 像素；}

    .container{
width:300px;
height:150px;
outline:1px solid green;
    <div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;">  
         
<rect id="R1" x="0" y="0" width="100" height="100" rx="15" fill="silver" />
</svg>
</div>  
<script> 
console.log(R1.getBBox())
</script>

    3.容器{宽度：150px; 高度：300 像素；}

    .container{
width:150px;
height:300px;
outline:1px solid green;
}
    <div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;">  
         
<rect id="R1" x="0" y="0" width="100" height="100" rx="15" fill="silver" />
</svg>
</div>  
<script> 
console.log(R1.getBBox())
</script>

    这些是固定大小的SVG 示例，其中正方形在父容器中占用的空间等于其自身的尺寸。100х100px

    父容器中的 SVG 动态缩放

    为此，将 SVG 的宽度和高度指定为百分比或未指定width, height，相当于100%

    width="100%" height="100%" viewBox="0 0 100 100"

    ＃一％。.container{宽度：200px；高度：200px；

    父容器是两倍大，但百分比 svg 完全填满了它。与上面的示例 1 进行比较，其中 SVG 具有固定大小

    笔记！
    正方形被拉伸到父容器的大小，因为容器的纵横比是 1:1，而正方形的纵横比是 1:1。所以在屏幕上它呈现200х200px为父级的大小，但它的物理尺寸（在 SVG 中给出）保持不变100х100px，这表明getBBox()

    .container{
width:200px;
height:200px;
outline:1px solid green;
}
    <div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="100%" height="100%" viewBox="0 0 100 100" style="border:1px solid red;">  
         
<rect id="R1" x="0" y="0" width="100" height="100" rx="15" fill="silver" />
</svg>
</div>  
<script> 
console.log(R1.getBBox())
</script>

    #2%。容器{宽度：300px；高度：100px；

    父容器的宽度是高度的三倍，但它没有拉伸到全宽100х100px，因为指定了参数preserveAspectRatio="xMinYMin meet"，这迫使正方形保持其比例并紧贴左边缘

    .container{
width:300px;
height:100px;
outline:1px solid green;
}
    <div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;">  
         
<rect id="R1" x="0" y="0" width="100" height="100" rx="15" fill="silver" />
</svg>
</div>  
<script> 
console.log(R1.getBBox())
</script>

    #2.1。preserveAspectRatio="xMaxYMin 满足"

    将正方形推到父容器的右边缘 -xMax

    .container{
width:300px;
height:100px;
outline:1px solid green;
}
    <div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMin meet" style="border:1px solid red;">  
         
<rect id="R1" x="0" y="0" width="100" height="100" rx="15" fill="silver" />
</svg>
</div>  
<script> 
console.log(R1.getBBox())
</script>

    #2.2。保留纵横比=“无”

    这个属性告诉 SVG 不要保持纵横比，因为width="100%"SVG 它会拉伸到父元素的全宽

    .container{
width:300px;
height:100px;
outline:1px solid green;
}
    <div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style="border:1px solid red;">  
         
<rect id="R1" x="0" y="0" width="100" height="100" rx="15" fill="silver" />
</svg>
</div>  
<script> 
console.log(R1.getBBox())
</script>

    #3%。容器{宽度：100px；高度：300px；

    父容器的高度是 SVG 高度的 3 倍，因此 svg 正方形位于最顶部。

    .container{
width:100px;
height:300px;
outline:1px solid green;
}
    <div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;">  
         
<rect id="R1" x="0" y="0" width="100" height="100" rx="15" fill="silver" />
</svg>
</div>  
<script> 
console.log(R1.getBBox())
</script>

    结论：

    • 对于响应式 SVG，指定viewBox.

    • width height在 SVG 标头中，指定为百分比或不指定任何值，相当于 100%

    • Чтобы SVG полностью заполнил родительский контейнер сделайте одинаковым соотношение width, height родительского контейнера и width, height SVG (пример в этом ответе - #1%.)

    • Не применяйте preserveAspectRatio="none" это нарушает пропорции соотношения сторон

    Update

    #4. Размеры родительского контейнера заданы в единицах относительно окна браузера

    • Сначала происходит масштабирование svg относительно родительского контейнера
    • Затем родительский контейнер масштабируется вместе с SVG относительно окна браузера
    .container{
width:60vw;
height:20vh;

    Понятно, что итоговые размеры родителя будут зависеть от разрешения и выбранного гаджета. Но заметьте, что физический размер квадрата SVG остается без изменений 100x100px см. вывод консоли.
    Зачем это нужно?
    Это, размеры в исходной (inital) системе координат SVG. Далее мы можем, как угодно трансформировать SVG, выводить результаты на экран, сжимать, растягивать, но исходная система координат останется без изменений.

    .container{
width:60vw;
height:20vh;
outline:1px solid green;
}
    <div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;">  
         
<rect id="R1" x="0" y="0" width="100" height="100" rx="15" fill="silver" />
</svg>
</div>  
<script> 
console.log(R1.getBBox())
</script>

    Связанные топики:

    CSS

    1. Как заставить элемент div автоматически изменять размер с сохранением aspect ratio (соотношения сторон)?
    2. Ответ @web-tiki

    SVG

    Ответ @Alexandr_TT

    • 8

  2. 类似的问题在 ruSO 上很常见。因此，在我看来，添加一个现成且完全可用的解决方案并不是多余的，这可能对未来的许多用户有用。

    这是解决问题的选项之一，使用JavaScript代码和使用变量CSS：

    function parentH() {
  let height = document.querySelector('#parent_range_H').value;
  let width = document.querySelector('#parent_range_W').value;
  document.querySelector('#parent').style.height = height + 'px';
  document.querySelector('#children').style.setProperty('--size', `${Math.min(height,width)}px`);
}

function parentW() {
  let height = document.querySelector('#parent_range_H').value;
  let width = document.querySelector('#parent_range_W').value;
  document.querySelector('#parent').style.width = width + 'px';
  document.querySelector('#children').style.setProperty('--size', `${Math.min(height,width)}px`);
}
    #parent {
  width: 300px;
  height: 300px;
  padding: 10px;
  border: 5px solid red;
}

#children {
  width: var(--size, 100%);
  height: var(--size, 100%);
  background: green;
}
    <p>Изменяем высоту (H) родителя: <input id="parent_range_H" type="range" min="10" max="300" value="300" step="1" name="parent_h" oninput="parentH()"></p>
<p>Изменяем ширину (W) родителя: <input id="parent_range_W" type="range" min="10" max="300" value="300" step="1" name="parent_w" oninput="parentW()"></p>

<div id="parent">
  <div id="children"></div>
</div>

    和相同的版本，只有代码的微小JavaScript变化CSS。在这种情况下，为子元素设置了不同的定位方法。对于父元素，值保持不变——position: relative元素的位置是相对于其原始位置设置的。但是子元素将其位置更改为绝对定位 - position: absolute，其中坐标从父元素的边缘开始计算：

    function parentH() {
  let height = document.querySelector('#parent_range_H').valueAsNumber;
  let width = document.querySelector('#parent_range_W').valueAsNumber;
  document.querySelector('#parent').style.height = height + 'px';
  let style = document.querySelector('#children').style;
  height <= width && (style.height = style.width = height + 'px');
}

function parentW() {
  let height = document.querySelector('#parent_range_H').valueAsNumber;
  let width = document.querySelector('#parent_range_W').valueAsNumber;
  document.querySelector('#parent').style.width = width + 'px';
  let style = document.querySelector('#children').style;
  height >= width && (style.height = style.width = width + 'px');
}
    #parent {
  position: relative;
  width: 300px;
  height: 300px;
  padding: 10px;
  border: 5px solid red;
}

#children {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: green;
}
    <p>Изменяем высоту (H) родителя: <input id="parent_range_H" type="range" min="10" max="300" value="300" step="1" name="parent_h" oninput="parentH()"></p>
<p>Изменяем ширину (W) родителя: <input id="parent_range_W" type="range" min="10" max="300" value="300" step="1" name="parent_w" oninput="parentW()"></p>

<div id="parent">
  <div id="children"></div>
</div>

    • 5

  3. 作为一个单独的答案，我将再添加一个选项，我们将仅更改父元素的高度，仅更改height子元素的宽度width。同时，我们仍然有一个子元素，它必须按比例改变其大小，并始终保持完全自适应的正方形。

    function parentH() {
  let height = document.querySelector('#parent_range_H').value;
  let width = document.querySelector('#children_range_W').value;
  document.querySelector('#parent').style.height = height + 'px';
  document.querySelector('#children').style.setProperty('--size', `${Math.min(height,width)}px`);
}

function childrenW() {
  let height = document.querySelector('#parent_range_H').value;
  let width = document.querySelector('#children_range_W').value;
  document.querySelector('#parent').style.height = height + 'px';
  document.querySelector('#parent').style.width = width + 'px';
  document.querySelector('#children').style.setProperty('--size', `${Math.min(height,width)}px`);
}
    #parent {
  width: 300px;
  height: 300px;
  padding: 10px;
  border: 5px solid cornflowerblue;
}

#children {
  width: var(--size, 100%);
  height: var(--size, 100%);
  background: deepskyblue;
}
    <p>Изменяем высоту (H) родителя: <input id="parent_range_H" type="range" min="10" max="300" value="300" step="1" name="parent_h" oninput="parentH()"></p>

<p>Изменяем ширину (W) квадрата: <input id="children_range_W" type="range" min="10" max="300" value="300" step="1" name="children_w" oninput="childrenW()"></p>

<div id="parent">
  <div id="children"></div>
</div>

    • 4

  4. Resize элемента может происходить из-за изменения размеров окна браузера, из-за вставки текста / загрузки картинки, вручную (css-resize: both) или скриптом - из любого места кода.

    На JS не нашел простого решения, который капитально покроет все случаи жизни. Поэтому разбиваю ответ на несколько конкретных вариантов:

    1: Есть ровно один элемент (например, главное окно мини-игры), его нужно сделать квадратным, и обновлять размеры только при resize окна браузера.

    var box = document.querySelector(".box");

updateSize();
window.addEventListener("resize", updateSize);

function updateSize(wid, hei) {
  var wid = window.innerWidth;  // box.parentNode.clientWidth;
  var hei = window.innerHeight; // box.parentNode.clientHeight;

  box.style.width = box.style.height = Math.min(wid, hei) + "px";
}
    body {
  margin: 0;
  padding: 0;
  background: #500;
}

.box {
  background: orange;
  margin: auto;
}
    <div class="box"></div>

    1.1: То же самое с защитой от дурака (Если каждое обновление размеров влечет за собой тяжелые изменения, пусть картинка не обновляется, если начнут играться и быстро ресайзить браузер)

    var box = document.querySelector(".box");

updateSize();

window.addEventListener("resize", function resize() {
  clearTimeout(resize.timeout);
  resize.timeout = setTimeout(updateSize, 300);
  // Таймер сбросится и запустится заново, если в течение
  // 300 миллисекунд после предыдущего resize, произошло еще одно событие
});

function updateSize(wid, hei) {  
  var wid = window.innerWidth;
  var hei = window.innerHeight;

  box.style.width = box.style.height = Math.min(wid, hei) + "px";
}
    body {
  margin: 0;
  padding: 0;
  background: #500;
}

.box {
  background: orange;
  margin: auto;
}
    <div class="box"></div>

    2: Если предстоит создавать большое количество таких зависимых блоков (плохо представляю, зачем), приятно было бы иметь функцию, которая запомнит, от кого и к кому нужно передать размеры, и в каких пропорциях. А при изменении размеров, лишь вызвать метод, обновляющий размеры зависимых элементов. Примерно так:

    let size = new Size({ from: parent, applyTo: child, ratio: 16 / 9, scale: 0.5 });

...onresize = () => size.update();

    Резиновые блоки, обновляются и от input-ов, и при resize окна:

    function Size(obj) {
  this.source = obj.from;
  this.target = obj.applyTo;

  this.ratio = obj.ratio || 1; // Какое отношение (wid/hgt) соблюдать для target
  this.scale = obj.scale || 1; // Полученные размеры target будут домножться на scale

  this.update();
}

Size.prototype.update = function() {
  var f = parseFloat, s = getComputedStyle(this.source);
  var wid = this.source.clientWidth - f(s.paddingLeft) - f(s.paddingRight);
  var hei = this.source.clientHeight - f(s.paddingTop) - f(s.paddingBottom);

  var target = this.target.style;

  magic: {
    // Если захочется вникнуть, для удобства выставить ratio = 2/1 или 1/2
    if (wid / hei < this.ratio) {
      target.width = wid * this.scale + "px"; // Занимает 100% ширину
      target.height = wid * (1 / this.ratio) * this.scale + "px";
      // Высота подстраивается под ширину.
    } else {
      target.width = hei * this.ratio * this.scale + "px";
      target.height = hei * this.scale + "px";
    }
  }
}

/*** Использование ***/
let storage = [];

let parent = document.querySelectorAll(".parent");
let child = document.querySelectorAll(".child");

for (let i = 0; i < parent.length; i++) {
  storage[i] = new Size({
    from: parent[i],
    applyTo: child[i],
    ratio: 4 / 3,
    scale: 0.25 * (i + 1)
  });
}

function updateAll() {
  storage.forEach(e => e.update());
}

/***/
window.addEventListener("resize", updateAll);

first("#resize-w").addEventListener("input", resize);
first("#resize-h").addEventListener("input", resize);

function resize() {
  let dir = this.dataset.dir;
  let size = this.value + (dir == "width" ? "vw" : "vh");
  
  parent.forEach(e => e.style[dir] = size);
  updateAll();
}

function first(selector) {
  return document.querySelector(selector);
}
    .parent {
  display: inline-block;
  width: 20vw;
  height: 80vh;
  background: #500;
  padding: 5px;
  margin: 5px;
  box-sizing: border-box;
}

.child {
  background: orange;
}
    <input type="range" min="5" max="20" value="20" step="0.1" id="resize-w" data-dir="width"/> W
<input type="range" min="5" max="80" value="80" step="0.1" id="resize-h" data-dir="height"/> H
<hr>
<div class="parent"><div class="child"></div></div>
<div class="parent"><div class="child"></div></div>
<div class="parent"><div class="child"></div></div>
<div class="parent"><div class="child"></div></div>

    Блоки не обязательно должны быть родительскими, могут быть где угодно. К одному блоку можно привязать несколько других, в разных местах.

    2.1: Применительно к коду из вопроса:

    // *Демонстрирует работоспособность. Бессмысленно воротить такое ради одного элемента.

function Size(obj) {
  this.source = obj.from;
  this.target = obj.applyTo;

  this.ratio = obj.ratio || 1; // Какое отношение (wid/hgt) соблюдать для target
  this.scale = obj.scale || 1; // Полученные размеры target будут домножться на scale

  this.update();
}

Size.prototype.update = function() {
  var f = parseFloat, s = getComputedStyle(this.source);

  var wid = this.source.clientWidth - f(s.paddingLeft) - f(s.paddingRight);
  var hei = this.source.clientHeight - f(s.paddingTop) - f(s.paddingBottom);
  
  var target = this.target.style;

  magic: {
    if (wid / hei < this.ratio) {
      target.width = wid * this.scale + "px";
      target.height = wid * (1 / this.ratio) * this.scale + "px";
    } else {
      target.width = hei * this.ratio * this.scale + "px";
      target.height = hei * this.scale + "px";
    }
  }
}

/*****/
let parent = document.querySelector("#parent");
let child = document.querySelector("#children");

let size = new Size({ from: parent, applyTo: child, ratio: 1 });

function resize(range, direction) { // -> HTML, oninput
  parent.style[direction] = range.value + "px";
  size.update();
}
    #parent {
  width: 300px;
  height: 300px;
  padding: 10px;
  border: 5px solid red;
}

#children {
  width: 100%;
  height: 100%;
  background: green;
}
    <p>Изменяем высоту (H) родителя: <input oninput="resize(this, 'height')" id="parent_range_H" type="range" min="10" max="300" value="300" step="1" name="parent_h"></p>
<p>Изменяем ширину (W) родителя: <input oninput="resize(this, 'width')" id="parent_range_W" type="range" min="10" max="300" value="300" step="1" name="parent_w"></p>

<div id="parent">
  <div id="children"></div>
</div>

    3. Заранее не известно, откуда может происходить resize, но очень нужно контролировать размеры блока. ResizeObserver

    var box = document.querySelector("#box");

var observer = new ResizeObserver(function(e) {
  console.clear();
  console.log(e); // <-- вся необходимая информация о размерах,
                  // которую можно дальше как-то обрабатывать.
});

observer.observe(box);
/***/

box.style.width = "50vw"; // <-- сработает observer.
    #box {
  width: 50vw;
  height: 50vh;
  background: orange;
  overflow: hidden;
  resize: both;
}
    <input type="range" oninput="box.style.width = this.value + 'vw';">

<div id="box"></div>

    Поддерживается во всех современных браузерах.

    Если нужна поддержка старых, можно написать функцию, которая, например, раз в полсекунды (setInterval(fn, 500)) или 60 раз в секунду (requestAnimationFrame) проверяет размер нужного блока и в случае обнаружения изменений, выполняет функцию. Или гуглить → resize observer polyfill

    • 4

相关问题