Javascript 将不同大小的图像设置为固定大小的网格

我使用React内部的引导程序在固定大小的框中显示图像网格。这些图片大小不一，我不想扭曲它们。我要寻找的行为是在固定大小的框的中心显示一个图像，例如325X250，带有白色（或任何颜色）背景。我真的不是一个CSS的人，所以这个问题

这是我的代码

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>
    );

这显然行不通。我调查过这个链接

但无法找到符合我要求的解决方案。

---

感谢您的帮助。

尝试将

100%

添加到这两个选项中：

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

---

将

100%

添加到这两个元素中，将使其达到父元素的全宽

作为

标记的替代，您可以使用任何块级元素和CSS

背景

属性：

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

属性

background size

和值

contain

将渲染背景图像，以便在不失真的情况下尽可能拉伸到包含元素的边缘，并保持原始纵横比

一小条

.img{
背景重复：无重复；
背景尺寸：包含；
背景位置：中心；
轮廓：1px红色虚线；
宽度：325px；
高度：250px；
利润率：10px自动；
}
#英国广播公司{
背景图片：url(http://i.imgur.com/4TLlrL3.png);
}
#莉娜{
背景图片：url(http://i.imgur.com/o1RbMvI.png);
}
#正常的{
背景图片：url(http://i.imgur.com/43uy0hP.png);
}

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