CSS: предельный элемент в мин (ширина контейнера, высота контейнера)

Question

Принимая во внимание следующее:

<div class="container"> 
    <div class="content"> 

    </div> 
</div> 

Есть ли CSS способ динамически устанавливать и высоту и ширину content элемента к меньшему из двух значений (высота или ширина) container?

Например, если container является 460x320, то content должно быть 320x320. Если container - 240x333, то content должно быть 240x240.
Размер container не известен заранее, поэтому использование фиксированных значений не будет работать.
Я пробовал все, от max-height/max-width до object-fit, но не смог заставить его работать.

Проверить это jsfiddle for a demo (с помощью Javascript)

Это довольно легко сделать с помощью JavaScript, но я ищу для CSS Трюк, если это возможно.

Answer 1

Проверьте фрагмент. Это решение CSS3 @media query.

.container{ 
 
    width: 240px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    height: 333px; 
 
    position: relative; 
 
    background-color: rgba(0, 0, 0, 0.70); 
 
    border-radius: 3px; 
 
} 
 
@media (min-width: 768px){ 
 
    .container{ 
 
    width: 460px; 
 
    height: 320px; 
 
    } 
 
} 
 
.content{ 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    top: -webkit-calc(50% - ((100% - 93px)/2)); 
 
    top: -moz-calc(50% - ((100% - 93px)/2)); 
 
    top: calc(50% - ((100% - 93px)/2)); 
 
    height: -webkit-calc(100% - (333px - 240px)); 
 
    height: -moz-calc(100% - (333px - 240px)); 
 
    height: calc(100% - (333px - 240px)); 
 
    background-color: green; 
 
} 
 
@media (min-width: 768px){ 
 
    .content{ 
 
    top: 0; 
 
    height: 100%; 
 
    width: -webkit-calc(100% - (100% - 320px)); 
 
    width: -moz-calc(100% - (100% - 320px)); 
 
    width: calc(100% - (100% - 320px)); 
 
    left: -webkit-calc(50% - ((100% - (100% - 320px))/2)); 
 
    left: -moz-calc(50% - ((100% - (100% - 320px))/2)); 
 
    left: calc(50% - ((100% - (100% - 320px))/2)); 
 
    } 
 
}

<div class="container"> 
 
    <div class="content">I'm Absolute</div> 
 
</div>

Редактировать

Я понимаю, что вы хотите. Над фрагментом работы только для CSS3 @media query. Вам нужно рассказать каждый раз, сколько всего width и height вы хотите дать childelement, используя JavaScript. Если ваш элемент child - absoluteposition, то вам необходимо установить left, right, top и bottom позиция по script. Вы не можете установить width и height, используя только CSS при случайном изменении parent box height и width.

только один способ, которым Вы можете установить высоту и ширину CSS вас Если вы хотите, чтобы уменьшить некоторое количество (т.е. 50px суммы) все время от общего width и общей height при изменении родителя width и height случайным образом.

Проверьте этот фрагмент.

const container = document.querySelector(".container"); 
 
const content = document.querySelector(".content"); 
 

 
const min = 300, max = 600; 
 
function resize() { 
 
    const width = Math.floor(Math.random() * (max - min + 1)) + min; 
 
    const height = Math.floor(Math.random() * (max - min + 1)) + min; 
 

 
    container.style.width = width + "px"; 
 
    container.style.height = height + "px"; 
 
} 
 

 
const button = document.querySelector("button"); 
 
button.addEventListener("click", resize); 
 

 
resize();

.container{ 
 
    width: 460px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    height: 320px; 
 
    position: relative; 
 
    background-color: rgba(0, 0, 0, 0.70); 
 
    border-radius: 3px; 
 
} 
 
.content{ 
 
    position: absolute; 
 
    left: calc(50% - ((100% - 50px)/2)); 
 
    width: calc(100% - 50px); 
 
    top: -webkit-calc(50% - ((100% - 50px)/2)); 
 
    top: -moz-calc(50% - ((100% - 50px)/2)); 
 
    top: calc(50% - ((100% - 50px)/2)); 
 
    height: -webkit-calc(100% - 50px); 
 
    height: -moz-calc(100% - 50px); 
 
    height: calc(100% - 50px); 
 
    background-color: green; 
 
}

<div class="container"> 
 
    <div class="content">I'm Absolute</div> 
 
</div> 
 

 
<button>resize</button>

Если эта работа, то это будет хорошо. В противном случае можно изменить только на CSS.

спасибо.

Answer 2

• То, о чем вы просите, невозможно с CSS.CSS является декларативным языком
• Таким образом, нет способа получить размер элемента, сравнить его высоту и ширину и установить его в другой элемент.