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

尝试将100%添加到其中：

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

向它们两者添加100%将使其成为父元素的全宽

Answer 2

作为<img>标记的替代方法，您可以使用任何块级元素和CSS background属性：

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

属性background-size和值contain会将背景图像拉伸到包含元素边缘的背景图像，尽可能无失真并保持原始外观比。

段

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案:

段