Как изменить пропорции изображения под определённые значение

Question

Как мне уменьшить или увеличить изображение до определённый критерий, допустим максимум изображения 100х100, а программа получила изображение 543х234, как мне уменьшить изображение до допустимых сохраняя пропорции, я пытался как сделать это через проценты но оно не правильно считало, как мне сделать это ?

Answer 1

const resize = (w, h, wmax = 200, hmax = 100) => {
  if (w <= wmax && h <= hmax) return [w, h];
  const r = Math.min(wmax / w, hmax / h);
  return [Math.floor(w * r), Math.floor(h * r)];
}

[
  [543, 234],
  [50, 50],
  [200, 100],
  [100, 200],
  [200, 200],
  [50, 500],
  [500, 50]
]
.forEach(([w, h]) =>
  console.log(w, h, `-`, resize(w, h).join())
)

Answer 2

Можно и CSS. JS не обязателен.

.frame {
  border: 6px solid #ccc;
  resize: both;
  overflow: hidden;
  position: relative;
  width: 400px;
  height: 400px;
  text-align: right;
  background: url('data:image/svg+xml,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%20256%20256"><path%20fill="none"%20stroke="%23f00%22%20d=%22M232%20232l16%2016m-16%200h16v-16"/></svg>') right bottom no-repeat
}

.frame:hover {
  border: 6px solid #888;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

<div class="frame">
  <img src="https://images.unsplash.com/photo-1634325232058-e7b8f80cc20b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80" />
</div>

Немного раскрывая тему соотношения сторон на CSS. Пример ниже лучше раскрыть на всю страницу.

document.querySelector(".ratio").addEventListener("click", (e) => {
  const {
    width,
    height,
    top,
    right,
    bottom,
    left
  } =
  e.target.getBoundingClientRect();
  const ratio = document.querySelector('input[name="ratio"]:checked');
  alert(`
          width=${width} height=${height}
          ratio=${width / height} (${ratio.value})
          left=${left} right=${document.body.clientWidth - right}
          top=${top} bottom=${document.body.clientHeight - bottom}
        `);
});

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  font-family: sans-serif;
}

.hidden {
  display: none;
}

table {
  position: fixed;
  width: 30rem;
  height: 16rem;
  margin: 0;
  z-index: 5;
  border: 1px solid #000;
  background: #fff3;
  backdrop-filter: blur(3px);
  text-shadow: 0 0 8px #fff;
}

td {
  width: 10rem;
  height: 2rem;
  text-align: center;
}

.ratio {
  background: #888;
  margin: 0;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  z-index: 3;
  position: fixed;
}

label::before {
  margin-right: 0.3rem;
  content: "\25ef";
}

#ratio-9-25:checked~table label[for="ratio-9-25"]::before,
#ratio-1-2:checked~table label[for="ratio-1-2"]::before,
#ratio-9-16:checked~table label[for="ratio-9-16"]::before,
#ratio-3-4:checked~table label[for="ratio-3-4"]::before,
#ratio-1-1:checked~table label[for="ratio-1-1"]::before,
#ratio-4-3:checked~table label[for="ratio-4-3"]::before,
#ratio-16-9:checked~table label[for="ratio-16-9"]::before,
#ratio-2-1:checked~table label[for="ratio-2-1"]::before,
#ratio-25-9:checked~table label[for="ratio-25-9"]::before,
#hor-align-left:checked~table label[for="hor-align-left"]::before,
#hor-align-center:checked~table label[for="hor-align-center"]::before,
#hor-align-right:checked~table label[for="hor-align-right"]::before,
#ver-align-top:checked~table label[for="ver-align-top"]::before,
#ver-align-center:checked~table label[for="ver-align-center"]::before,
#ver-align-bottom:checked~table label[for="ver-align-bottom"]::before {
  content: "\25c9";
}

#ratio-9-25:checked~.ratio {
  max-height: calc(100vw / 9 * 25);
  height: 100vh;
  max-width: calc(100vh / 25 * 9);
  width: 100vw;
}

#ratio-1-2:checked~.ratio {
  max-height: calc(100vw * 2);
  height: 100vh;
  max-width: calc(100vh / 2);
  width: 100vw;
}

#ratio-9-16:checked~.ratio {
  max-height: calc(100vw / 9 * 16);
  height: 100vh;
  max-width: calc(100vh / 16 * 9);
  width: 100vw;
}

#ratio-3-4:checked~.ratio {
  max-height: calc(100vw / 3 * 4);
  height: 100vh;
  max-width: calc(100vh / 4 * 3);
  width: 100vw;
}

#ratio-1-1:checked~.ratio {
  max-height: 100vw;
  height: 100vh;
  max-width: 100vh;
  width: 100vw;
}

#ratio-4-3:checked~.ratio {
  max-height: calc(100vw / 4 * 3);
  height: 100vh;
  max-width: calc(100vh / 3 * 4);
  width: 100vw;
}

#ratio-16-9:checked~.ratio {
  max-height: calc(100vw / 16 * 9);
  height: 100vh;
  max-width: calc(100vh / 9 * 16);
  width: 100vw;
}

#ratio-2-1:checked~.ratio {
  max-height: calc(100vw / 2);
  height: 100vh;
  max-width: calc(100vh * 2);
  width: 100vw;
}

#ratio-25-9:checked~.ratio {
  max-height: calc(100vw / 25 * 9);
  height: 100vh;
  max-width: calc(100vh / 9 * 25);
  width: 100vw;
}

#hor-align-left:checked~.ratio {
  left: 0;
}

#hor-align-center:checked~.ratio {
  left: 50vw;
}

#hor-align-right:checked~.ratio {
  left: 100vw;
}

#ver-align-top:checked~.ratio {
  top: 0;
}

#ver-align-center:checked~.ratio {
  top: 50vh;
}

#ver-align-bottom:checked~.ratio {
  top: 100vh;
}

#hor-align-left:checked~#ver-align-top:checked~.ratio {
  transform: translate(0, 0);
}

#hor-align-left:checked~#ver-align-center:checked~.ratio {
  transform: translate(0, -50%);
}

#hor-align-left:checked~#ver-align-bottom:checked~.ratio {
  transform: translate(0, -100%);
}

#hor-align-center:checked~#ver-align-top:checked~.ratio {
  transform: translate(-50%, 0);
}

#hor-align-center:checked~#ver-align-center:checked~.ratio {
  transform: translate(-50%, -50%);
}

#hor-align-center:checked~#ver-align-bottom:checked~.ratio {
  transform: translate(-50%, -100%);
}

#hor-align-right:checked~#ver-align-top:checked~.ratio {
  transform: translate(-100%, 0);
}

#hor-align-right:checked~#ver-align-center:checked~.ratio {
  transform: translate(-100%, -50%);
}

#hor-align-right:checked~#ver-align-bottom:checked~.ratio {
  transform: translate(-100%, -100%);
}

<input class="hidden" type="radio" name="ratio" id="ratio-9-25" value="9:25" />
<input class="hidden" type="radio" name="ratio" id="ratio-1-2" value="1:2" />
<input class="hidden" type="radio" name="ratio" id="ratio-9-16" value="9:16" />
<input class="hidden" type="radio" name="ratio" id="ratio-3-4" value="3:4" />
<input class="hidden" type="radio" name="ratio" id="ratio-1-1" value="1:1" checked />
<input class="hidden" type="radio" name="ratio" id="ratio-4-3" value="4:3" />
<input class="hidden" type="radio" name="ratio" id="ratio-16-9" value="16:9" />
<input class="hidden" type="radio" name="ratio" id="ratio-2-1" value="2:1" />
<input class="hidden" type="radio" name="ratio" id="ratio-25-9" value="25:9" />

<input class="hidden" type="radio" name="hor-align" id="hor-align-left" value="left" />
<input class="hidden" type="radio" name="hor-align" id="hor-align-center" value="center" checked />
<input class="hidden" type="radio" name="hor-align" id="hor-align-right" value="right" />

<input class="hidden" type="radio" name="ver-align" id="ver-align-top" value="top" />
<input class="hidden" type="radio" name="ver-align" id="ver-align-center" value="center" checked />
<input class="hidden" type="radio" name="ver-align" id="ver-align-bottom" value="bottom" />

<table cellpadding="3" cellspacing="0" border="0">
  <tr>
    <th colspan="3">Aspect ratio</th>
  </tr>
  <tr>
    <td><label for="ratio-9-25">9:25</label></td>
    <td><label for="ratio-1-2">1:2</label></td>
    <td><label for="ratio-9-16">9:16</label></td>
  </tr>
  <tr>
    <td><label for="ratio-3-4">3:4</label></td>
    <td><label for="ratio-1-1">1:1</label></td>
    <td><label for="ratio-4-3">4:3</label></td>
  </tr>
  <tr>
    <td><label for="ratio-16-9">16:9</label></td>
    <td><label for="ratio-2-1">2:1</label></td>
    <td><label for="ratio-25-9">25:9</label></td>
  </tr>
  <tr>
    <th colspan="3">Horizontal alignment</th>
  </tr>
  <tr>
    <td><label for="hor-align-left">left</label></td>
    <td><label for="hor-align-center">center</label></td>
    <td><label for="hor-align-right">right</label></td>
  </tr>
  <tr>
    <th colspan="3">Vertical alignment</th>
  </tr>
  <tr>
    <td><label for="ver-align-top">top</label></td>
    <td><label for="ver-align-center">center</label></td>
    <td><label for="ver-align-bottom">bottom</label></td>
  </tr>
</table>

<div class="ratio">
  <h2>Fixed aspect ratio</h2>
  <p>Just click me</p>
</div>

БЛОГ НА HUSL

Как изменить пропорции изображения под определённые значение

Ответы (2 шт):