html - 将最小宽度、最小高度、最大宽度和最大高度与 child 可见性相结合

Question

我想将一个元素(填充了一些子内容)保持在相对于容器的最小和最大 width 和 height 之间。假设宽度应不少于 10% 且不超过 30%，高度应介于 30% 和 50% 之间。

child 应该收缩到宽度或高度，这取决于首先限制它。

不幸的是，由于某些原因，渲染时似乎只考虑了 max-width。高度值无关紧要。为什么？

.minmax {
  min-height: 30%;
  max-height: 50%;
  min-width: 10%;
  max-width: 30%;
  background: black;
  overflow: hidden;
}

.maxchild {
  width: 100%;
  height: 100%;
}

<div class="minmax">
<img class="maxchild" src="https://i.pinimg.com/736x/9d/db/74/9ddb7408078168b787aeb48b2c36d65a--quinoa-recipe-puppet-show.jpg" />
</div>

Answer 1

你是指这样的事情吗？我还根据扩展的维度在内部水平和垂直对齐图像。

.minmax {
  min-height: 30vh;
  max-height: 50vh;
  min-width: 5%;
  max-width: 10%;
  background: black;
  overflow: hidden;
  position:relative;
  display: flex; 
  justify-content: center;
  align-items: center; 
}

.maxchild {
  max-width:100%;
  max-height:100%;
}

<div class="minmax">
<img class="maxchild" src="https://i.pinimg.com/736x/9d/db/74/9ddb7408078168b787aeb48b2c36d65a--quinoa-recipe-puppet-show.jpg" />
</div>