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

如果您不想使用带有background-size:cover的CSS背景（虽然这确实也不是一个糟糕的解决方案），这是一个相当具有挑战性的任务，因为一个关键因素：横向与纵向图像。无法在CSS中检测图像的方向。这是一个问题，因为您无法将height和width（或max-height和max-width）分配给100%，并期望它能够正常运行。它会扭曲图像并失去纵横比。在这种情况下，我建议使用一些javascript来区分这两者。这很不幸，但是如果你想用HTML img元素实现这种效果是必要的（同样，这不是唯一的解决方案。背景图像仍然可行）。

这是我想出来实现这个效果的：

var images = document.querySelectorAll('.container img');
for(var i = 0, len = images.length; i < len; i++) {
  images[i].addEventListener('load', function() { 
    this.className += (this.width > this.height) ? ' landscape' : ' portrait';
  });
}

.container {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 3em auto;
}
.container:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border: 2px solid;
    box-sizing: border-box;
}
.container img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2px;
    box-sizing: border-box;
}

.container img.landscape {
    max-width: none;
}
.container img.portrait {
    max-height: none;
}

<div class="container">
    <img src="//placehold.it/200x300"/>
</div>

<div class="container">
    <img src="//placehold.it/300x200"/>
</div>

<div class="container">
    <img src="//placehold.it/200x200"/>
</div>

<div class="container">
    <img src="//placehold.it/500x100"/>
</div>

Answer 2

使用此css属性

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

Answer 3

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

原来还有另一种方法可以做到这一点。

<img style='height: 100%, width: 100%, object-fit: cover'/> 

将完成这项工作。这是CSS3的东西。

小提琴：http://jsfiddle.net/mbHB4/3/