javascript - 将不同大小的图像样式化为固定大小的网格

Question

我在 React 内部使用 Bootstrap 在固定大小的框中显示图像网格。这些图像的大小各不相同，我不想扭曲它们。我正在寻找的行为是显示在固定大小框中心的图像，例如 325X250 具有白色(或任何颜色)背景。我真的不是一个 CSS 人，因此是个问题。

这是我的 React 代码。

return (
      <div className="row">
        <div className="image-viewer">
          {this.state.overlay}
          <ul className="list-inline">
            {this.state.images.map(function (image) {
              return (<li key={image.src}><a href="#" onClick={this.handleClick} data-id={image.mediaId}><div className="img-container "><img
                src={image.src}
                className="img-responsive"
                alt={image.mediaId}/></div></a></li>);
            }, this)}

          </ul>
        </div>
      </div>
    );

这是我到目前为止所做的样式，

.image-container{
  width: 250px;
  height: 300px;
  /*width: 400px;*/
  overflow: hidden;
}
.image-container img{
  height: auto;
  width: 100%;
}

这显然行不通。我查看了这个链接，

How can I make all images of different height and width the same via CSS?

但无法找到任何解决方案来满足我的要求。任何帮助表示赞赏。

Answer 1

作为 <img> 的替代品标签，您可以使用任何 block 级元素和 CSS background属性:

background-image: url(http://domain.top/path/to/img.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;

属性(property)background-size和值 contain将呈现背景图像以尽可能拉伸(stretch)到它包含元素的边缘而不会失真，并将保持原始纵横比。

片段

.img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  outline: 1px dashed red;
  width: 325px;
  height: 250px;
  margin: 10px auto;
}
#bbc {
  background-image: url(http://i.imgur.com/4TLlrL3.png);
}
#lena {
  background-image: url(http://i.imgur.com/o1RbMvI.png);
}
#normal {
  background-image: url(http://i.imgur.com/43uy0hP.png);
}

<div id='bbc' class='img'></div>
<figure id='lena' class='img'></figure>
<section id='normal' class='img'></section>