Div в центре другого div с пропорциональными отступами

@TheEd01 · Регистрация: 16.10.2018

Author24 — интернет-сервис помощи студентам

Всем добра!
Можно ли реализовать на CSS или нужно JS привлекать:
есть body/div/иной контейнер, внутри которого размещается div с динамическим содержимым (может меняться ширина/высота). Хотелось бы, чтобы внутренний div выростал своими размерами (шириной и высотой) одновременно, т.е. чтобы условно говоря, его вершины лежали +/- на диагоналях родительского div'а.
Подозреваю что здесь flex поможет, но его мало юзал.
На данный момент этот вариант приводит к росту сначала ширины вплоть до размеров родителя с учётом пэддингов и маржинов, и только потом растёт высота:

HTML5

<div class="popup-overlay" style="">
  <div class="border-wrapper">
    <div class="popup-wnd-content" id="my-popup-wnd-content">
      <p>Some content here...</p>
    </div>
  </div>
</div>

CSS

div.popup-overlay {
    background-color: rgba(0,0,0,.25);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
 
div.popup-overlay > div.border-wrapper {
    align-self: center;
    background-color: rgba(0,0,0,.25);
    border-radius: 2px;
    padding: 6px;
    margin: 15px;
}
 div.popup-overlay > div.border-wrapper > div.popup-wnd-content {
     background-color: rgb(255,255,255);
     border-radius: 2px;
     padding: 24px;    
     position: relative;
 }
 
div.popup-overlay > div.border-wrapper > div.popup-wnd-content > p {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

зы: вопрос не горит, просто вспомнил - стало интересно

@mr_dramm · 12.01.2023, 17:35

Что-то такое?

PHP/HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    .box {
        display: flex;
        justify-content: center;
        align-items: center;
    }
 
    .item {
        border: solid;
        padding: 1rem;
    }
 
    .content {
        transition: width 1s, height 1s;
        border: solid;
    }
    </style>
</head>
 
<body>
    <div class="box">
        <div class="item">
            <div class="content"></div>
        </div>
    </div>
    <script>
    const content = document.querySelector(".content")
    const dimensions = [{ h: 200, w: 400 }, { h: 300, w: 600 }]
    let index = 0
    const setDimension = () => {
        content.style.height = dimensions[index].h + "px";
        content.style.width = dimensions[index].w + "px";
        index = index === dimensions.length - 1 ? 0 : index + 1;
    }
    setDimension()
    setInterval(() => {
        setDimension()
    }, 1000)
    
    </script>
</body>
 
</html>

@~~KingdaKa~~ · 13.01.2023, 04:57

TheEd01, во-первых, никогда не используйте вот такой анахронизм:

CSS

1	div.popup-overlay>div.border-wrapper>div.popup-wnd-content>p

Это на простой страничке из трёх блоков оно еще прокатывает, когда кода будет тысячи строк офигеете его отлаживать.
Каждому блоку свой класс!

Во-вторых, нарисуйте что вам всё-таки надо, потому что из описания непонятно. Возможно вам нужно свойство aspect-ratio просто.

@TheEd01 · 19.01.2023, 17:22 **[ТС]**

mr_dramm: спасибо, код интересный, но js'ом можно гору своротить. Хотелось ограничиться CSS...

KingdaKa: тоже спасибо, но я пока просто маленький тест набросал, само собой, если встраивать в серьёзный проект, там будет несколько иначе

@mr_dramm · 19.01.2023, 20:33

Сообщение от TheEd01

но js'ом можно гору своротить

тут js чисто для демонстрации изменения пропорций при изменениях размеров блока. На разметку он никак не влияет

@NTHing · 20.01.2023, 01:38

JS free... И это ещё CSS так... Только прикоснулся...

PHP/HTML

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        display: grid;
        place-content: center;
        height: 100vh;
        background: radial-gradient(
          circle at 50% 50%,
          rgba(87, 156, 173, 1) 0%,
          rgba(10, 49, 59, 1) 100%
        );
      }
      main {
        width: 50vw;
        border: 10px solid grey;
        padding: 2rem;
        background: #0d1840;
      }
      section {
        max-width: 100%;
        border: 10px solid grey;
        padding: 2rem;
        color: white;
        background: hsl(7 52% 45%);
      }
    </style>
    <main>
      <section>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga qui est
        inventore cupiditate, modi labore expedita nemo error nostrum ab
        adipisci officia culpa harum nisi et rerum officiis incidunt provident.
      </section>
    </main>

@TheEd01 · 15.09.2023, 18:00 **[ТС]**

Спасибо!
Похоже на правду, но ширина внутреннего дива - 50% и ширина не меняется

(
Пока содержимого мало - это не критично. Но задумка в том чтобы синхронно менялась и ширина и высота с примерной пропорцией дива такой же как у родительского...

@TheEd01 2 / 2 / 0 Регистрация: 16.10.2018 Сообщений: 45
	19.01.2023, 17:22 [ТС]	4
	mr_dramm: спасибо, код интересный, но js'ом можно гору своротить. Хотелось ограничиться CSS... KingdaKa: тоже спасибо, но я пока просто маленький тест набросал, само собой, если встраивать в серьёзный проект, там будет несколько иначе 0

@mr_dramm молодой 1641 / 905 / 291 Регистрация: 17.07.2021 Сообщений: 1,851 Записей в блоге: 12
	19.01.2023, 20:33	5
	Сообщение от TheEd01 но js'ом можно гору своротить тут js чисто для демонстрации изменения пропорций при изменениях размеров блока. На разметку он никак не влияет 0

@TheEd01 2 / 2 / 0 Регистрация: 16.10.2018 Сообщений: 45
	15.09.2023, 18:00 [ТС]	7
	Спасибо! Похоже на правду, но ширина внутреннего дива - 50% и ширина не меняется ( Пока содержимого мало - это не критично. Но задумка в том чтобы синхронно менялась и ширина и высота с примерной пропорцией дива такой же как у родительского... 0

Div в центре другого div с пропорциональными отступами

Решение