Question

我正在创建一个带图像的网格。我有空图像的问题：

.myForm {
    position: relative;
    font-size: 0;
    line-height: 0;
}

.imgWrapper {
    position: relative;
    display: inline-block;
    width: 33.3333333%;
    box-sizing: border-box;
    background: tomato;
}

img {
    width: 100%;
    height: 100%;
}

<form class="myForm">
    <div class="imgWrapper">
        <img src="http://www.whizzpast.com/wordpress/wp-content/uploads/2015/04/vintage-cats-14.jpg">
    </div>
    <div class="imgWrapper">
        <img src="">
    </div>
    <div class="imgWrapper">
        <img src="http://www.whizzpast.com/wordpress/wp-content/uploads/2015/04/vintage-cats-14.jpg">
    </div>
   
</form>

我想强制空图像与其他图像具有相同的大小。 - 我不知道这是否可以用flexbox完成，但我更愿意避免它 - 。我想我可以添加另一个包装器，但我宁愿避免使用它。

提前致谢！

Answer 1

.myForm {
    position: relative;
    font-size: 0;
    display: block;
}

.imgWrapper {
    width: 33%;
    display : inline-block;
    float:left;
     background: tomato;
    min-height : 135px;
    max-height : 135px;
}

img {
    width: 100%;
    height: 100%;
}

<form class="myForm">
    <div class="imgWrapper">
      
        <img src="http://www.whizzpast.com/wordpress/wp-content/uploads/2015/04/vintage-cats-14.jpg">
    </div>
    <div class="imgWrapper">
        <img src="">
    </div>
    <div class="imgWrapper">
        <img src="http://www.whizzpast.com/wordpress/wp-content/uploads/2015/04/vintage-cats-14.jpg">
    </div>
   
</form>

你只需要添加一些min-height和min-width并浮动到你的css：

例如：

.myForm {
    position: relative;
    font-size: 0;
    display: block;
}

.imgWrapper {
    width: 33%;
    display : inline-block;
    float:left;
     background: tomato;
    min-height : 135px;
    max-height : 135px;
}

img {
    width: 100%;
    height: 100%;
}

Answer 2

您可以为每个图片使用固定高度，并通过定位 attribute selector {{将此高度应用于损坏的图片1}}：

img[src='']

img[src=''] {
  height: 217px; /* The height of the actual images in the snippet */
}

.myForm {
  position: relative;
  font-size: 0;
  line-height: 0;
}

.imgWrapper {
  position: relative;
  display: inline-block;
  width: 33.3333333%;
  box-sizing: border-box;
  background: tomato;
}

img {
  width: 100%;
  height: 100%;
}

img[src=''] {
  height: 217px;
}

然而，在我看来，简单地隐藏完全破坏的图片会更好，这可以通过以下方式完成：

<form class="myForm">
  <div class="imgWrapper">
    <img src="https://i.pinimg.com/736x/1d/58/f1/1d58f1bb767a1bc2231226c4fc9ae85a--film-photography-vintage-photography.jpg">
  </div>
  <div class="imgWrapper">
    <img src="">
  </div>
  <div class="imgWrapper">
    <img src="https://i.pinimg.com/736x/1d/58/f1/1d58f1bb767a1bc2231226c4fc9ae85a--film-photography-vintage-photography.jpg">
  </div>
</form>

这可以在以下内容中看到：

img[src=''] {
  display: none;
}

.myForm {
  position: relative;
  font-size: 0;
  line-height: 0;
}

.imgWrapper {
  position: relative;
  display: inline-block;
  width: 33.3333333%;
  box-sizing: border-box;
  background: tomato;
}

img {
  width: 100%;
  height: 100%;
}

img[src=''] {
  display: none;
}

希望这有帮助！：）

Answer 3

我更喜欢做flexboxes。它就像......一样简单。

CSS：

.myForm {
    position: relative;
    font-size: 0;
    line-height: 0;
    display: flex;
}

.imgWrapper {

    position: relative;
    display: inline-block;
    width: 33.3333333%;
    box-sizing: border-box;
    background: tomato;
}

img {
    width: 100%;
    height: 100%;
}

HTML：

<form class="myForm">
    <div class="imgWrapper">
        <img src="http://www.whizzpast.com/wordpress/wp-content/uploads/2015/04/vintage-cats-14.jpg">
    </div>
    <div class="imgWrapper">
        <img src="">
    </div>
    <div class="imgWrapper">
        <img src="http://www.whizzpast.com/wordpress/wp-content/uploads/2015/04/vintage-cats-14.jpg">
    </div>

</form>

示例here。我假设您希望空背景图像具有高度。其他解决方案建议完全隐藏它，这也是一种选择。

为空时强制图像尺寸

3 个答案: