0

У меня код представляет идею стола с полароидными фотокарточками в изометрическом представлении.

Архив с фрагментом проекта

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Table</title>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    div.table {
      max-width: 700px;
      transform: translateY(0px) rotate(-30deg) skewX(30deg) scaleY(0.86062);
      border: 1px solid black;
    }
    div.table_flex {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: stretch;
    }
    div.table_flex div {
      display: inline-block;
      max-width: 200px;
      max-height: 200px;
      box-sizing: content-box;
      margin: 5px;
      border: 0.7px solid black;
      padding: 5px;
      padding-bottom: 15px;
    }
    div.table_flex div img {
      max-width: 100%;
      max-height: 100%;
    }
  </style>
</head>
<body>
  <div class="table table_flex">
    <div><img src="img/stab II StG 77.png" /></div>
    <div><img src="img/octocat.png" /></div>
    <div><img src="img/flag-belarus.jpg" /></div>
  </div>
</body>
</html>

Изображения вы можете найти в архиве или подставить свои.

И так, вопрос: как заставить div'ы ужиматься под размеры содержимого как по вертикали, так и по горизонтали?

2
  • 1
    У Вас для изображений внутри этих самых div`ов заданы размеры = 100% от родительского. И теперь Вы хотите, чтобы этот самый родитель ужимался под размеры дочернего изображения. Стоит определиться, кто под кого будет подстраиваться.
    – hisbvdis
    2 авг 2019 в 7:58
  • @hisbvdis Окей, указывая максимальный размер изображения в абсолютных еденицах, наш div ужимается по ширине, а как на счёт высоты? CSS-код: div.table_flex div { display: inline-block; box-sizing: content-box; margin: 5px; border: 0.7px solid black; padding: 5px; padding-bottom: 15px; } div.table_flex div img { max-width: 200px; max-height: 200px; }
    – delfin211
    2 авг 2019 в 8:24

1 ответ 1

0

Не для изображений размеры задавайте, а ширину для родительских div, а изображениям width: 100%;

Изображение по ширине будет занимать всю ширину блока, а высота блока будет автоматически заканчиваться там, где высота изображения.

1
  • Что-то мне подсказывает, что во flex'е надо как-то иначе задавать размерности...
    – delfin211
    3 авг 2019 в 11:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.