Question

我想在一个相对于容器的最小和最大width和height之间保留一个元素（填充一些子内容）。假设宽度不应小于10％且不大于30％，高度应不小于30％至50％。

孩子应该缩小到宽度或高度，这取决于它首先限制它。

不幸的是，由于某些原因，渲染时似乎只考虑了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

你指的是这样的事吗？我还根据哪个尺寸扩展来水平和垂直对齐图像。

＆＃13;

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

＆＃13;

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

＆＃13;

将最小宽度，最小高度，最大宽度和最大高度与儿童可见度相结合

1 个答案: