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

使用CSS无法满足您的要求。 CSS是一种声明性语言
因此，没有办法获得元素的大小，比较它的高度和宽度，并将其设置为另一个元素。

Answer 2

检查代码段。这是CSS3 @media query解决方案。

＆＃13;

.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));
  }
}

＆＃13;

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

＆＃13;

修改

我明白你想要什么。 以上代码段仅适用于CSS3 @media query 。您需要每次使用width告知height和child element JavaScript的数量。如果您的child元素为absolute position，那么您需要设置left，right，top和bottom位置{ {1}}。当随机更改script框width和height时，您无法仅使用CSS设置parent和height。

只有一种方法可以设置width你的身高和宽度你想要从总CSS和总{{1}中减少一些金额（即50px金额）当随机更改父width和height时。

检查此代码段。

＆＃13;

width

＆＃13;

height

＆＃13;

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();

＆＃13;

如果这项工作那么它会很好。否则只能通过.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; }进行更改。

谢谢。

css：将元素限制为min（容器宽度，容器高度）

2 个答案: