將最小寬度，最小高度，最大寬度和最大高度與孩子可見性結合在一起

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

您是在指這樣的東西嗎？ 我還根據擴大的尺寸在水平和垂直方向上對齊了圖像。

 .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>