在框内包含可变大小的图像，保持比例，填充框

Question

我会在网格中以横向10：7和纵向7:10列出图像。

所有图像都有这些比例，但是有些很小，有些很大。

我想在一个3像素宽的网格中列出它们，并且希望所有图像以相同的尺寸显示。我保持比例很重要。这些图像还具有css边框。

我有一个使用padding-bottom技巧的解决方案，其中将 a 标记设置为正方形，然后将 img 绝对定位在其中。这可行，但是当图像较小时，它们将不会放大。如果设置图像的宽度或高度，则比例会搞砸。

前两个图像太小，无法填充框：

html是为我生成的（我无法更改），其外观如下：

<li>
  <a>
    <img srcset="">
  </a>

  other stuff like title and description
</li>

我还尝试使用对象拟合将图像包含在正方形 a 标记内-这对我不起作用，因为图像已应用了CSS边框，然后该边框将变为正方形

Answer 1

正如Pete所指出的那样，无法使用纯CSS解决我的问题。我需要使用某种技术来确定图像是横向还是纵向。

我的最终解决方案是一个jQuery脚本，该脚本可检测图像并将其添加到图像中。

CSS：

.landscape {
  width: 100%;
}
.portrait {
  height: 100%;
}

jQuery：

window.onload = function () {
  var images = document.getElementsByTagName('img');

  for( var i=0; i<images.length;i++){
    if (images[i].naturalWidth > images[i].naturalHeight) {
      $(images[i]).addClass('landscape');
    } 
    else{ 
      if(images[i].naturalWidth < images[i].naturalHeight) {
        $(images[i]).addClass('portrait');  
      }
    }
  }
}

Add different classes to VERTICAL or HORIZONTAL img