CSS:适合较小的一面

Question

我正在尝试创建一个图标容器,它将显示任何图像大小(长或宽).

图像应该与容器较小的一侧适合容器,而额外容器将在容器外部.在应用溢出之前:隐藏它应该像这样工作.

它似乎很容易用js,但我很想找到一个CSS解决方案.

<div class="container">
   <img src="test.png"/>
</div>

.container {
   width: 30px;
   height: 30px;
}
.container img {
   position: relative;
   left: 50%;
   top: 50%;
   transform: translateY(-50%) translateX(-50%);
}

Answer 1

使用这个CSS属性

    .container img
{
height:100%;
width:100%;
}