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