响应式图片的垂直填充

Question

这个 CSS:

.outer-img-wrap {
    border: 2px solid gray;
    margin: 1vw auto;
    max-width: 192px;
    text-align: center;
    overflow: hidden;
}
.outer-img-wrap img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    vertical-align: middle;
}
.inner-img-wrap {
    background: #000;
    border: thin solid #ff9900;
    margin: 2px;
}

应用于此HTML：

应用于此HTML：

<td style="width: 25%">
    <div class="outer-img-wrap">
        <div class="inner-img-wrap">
            <img src="http://placehold.it/64x64" />
        </div>
    </div>
</td>

此代码可以在表格单元格中生成居中的响应式图片，它们的宽度都相同，这正是我想要的。

我还希望以响应式方式使图片具有相同的高度。因此，我在页面上添加了此Javascript来更新填充。

function resizeImageElements()
{
    var imageElements = $(".outer-img-wrap .inner-img-wrap img");
    var imageElementsMaxHeight = -1;
    imageElements.map( function(index) {
        // compare the height of the img element
        if( $(this).height() > imageElementsMaxHeight ) {
            imageElementsMaxHeight = $(this).height();
        }
    } );

    imageElements.map( function(index) {
        var computeTopBottomPadding = ( imageElementsMaxHeight - $(this).height() ) / 2;
        $(this).css( {
            "padding-top": computeTopBottomPadding,
            "padding-bottom": computeTopBottomPadding,
        } );
    } );
}

resizeImageElements();

问题是：我能否不使用Javascript代码，只使用CSS来实现相同的效果？

Fiddle链接：http://jsfiddle.net/ybkgLq4d/

- gaitat

---

我认为在这种情况下CSS无法做到。从某种意义上说，您必须知道哪些图像元素是最大的，然后确定如何使其他每个图像大小相等。正如您所展示的那样，在jquery中这是一个相当容易的任务。我相信这超出了CSS能力的范围。 - npage

最大高度元素的计算是因为我想让所有元素具有相同的尺寸。但是，如果指定了max-width，也可以指定最小或最大高度，以使事情变得更容易。 - gaitat

你有修改标记的能力吗？ - Neil Monroe

@npage 我确实需要可变的宽高比。 - gaitat

@NeilMonroe 我不太确定我理解了什么？这是我的页面。 - gaitat

Answer 1

嗯，不清楚你从哪里获取这些图片。如果你能够在后端服务器上处理这些图片（比如使用PHP、Python或Ruby），你可以始终创建一个固定比例的版本，这样当在前端调整大小时它们将具有相同的尺寸。这是我最喜欢的选项。

如果你不能或者不想创建一个不同版本的图片，我认为你最好的选择是使用一个带有背景图像的元素，而不是直接使用图像元素，并使用background-size来满足你的需求。

例如：

.outer-img-wrap {
    border: 2px solid gray;
    margin: 1vw auto;
    max-width: 192px;
    text-align: center;
    overflow: hidden;
}
.outer-img-wrap .img {
    display:inline-block;
    position:relative;
    vertical-align: middle;
    width:100%;
    background-position:center center;
    height:50px; /* or whatever height you want, you could use % value too relative to it's parent element */

    /* cross browser */
    -moz-background-size:cover;
    -o-background-size:cover;
    -ms-background-size:cover;
    -webkit-background-size:cover;
    background-size:cover;
}
.inner-img-wrap {
    background: #000;
    border: thin solid #ff9900;
    margin: 2px;
}

应用于此HTML：

<td style="width: 25%">
    <div class="outer-img-wrap">
        <div class="inner-img-wrap">
            <div class="img" style="background-image:url(http://placehold.it/64x64)"></div>
        </div>
    </div>
</td>

代码片段: https://jsfiddle.net/ybkgLq4d/14/

- tin

---

如果我用 height:80%; 替换 height:50px;，它似乎无法正常工作。 - gaitat

Answer 2

我尝试保持简单的标记，并使用:before、box-shadow和calc进行了一些操作。

* {
  box-sizing: border-box;
}
.pic {
  background-color: black;
  border: 2px solid gray;
  box-shadow: inset 2px 2px 0 0 white, inset -2px -2px 0 0 white, inset 3px 3px 0 0 orange, inset -3px -3px 0 0 orange;
  max-width: 192px;
  position: relative;
  width: 25%;
}
.pic:before {
  content: '';
  display: block;
  padding-bottom: 100%;
}
img {
  display: block;
  left: 50%;
  max-width: calc(100% - 6px);
  position: absolute;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  top: 50%;
}

/* for layout */

figure {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
figcaption {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: 1em;
}

<figure>
  <div class="pic">
    <img src="http://placehold.it/64x64">
  </div>
  <figcaption>text text text
    <figcaption>
</figure>
<figure>
  <div class="pic">
    <img src="http://placehold.it/400x300">
  </div>
  <figcaption>text text text
    <figcaption>
</figure>
<figure>
  <div class="pic">
    <img src="http://placehold.it/128x128">
  </div>
  <figcaption>text text text
    <figcaption>
</figure>

- Veiko Jääger