用于图形标记的内联块

Question

我正在创建一个简单的图库网格，使用图形标记作为一个带有照片及其标题的单元格。由于某种原因，我无法使它们与内联块排成一行。

HTML：

<article class="gallery">

  <figure>
    <figcaption>
        Hello
    <figcaption>    
    <img src="http://placehold.it/350x150">
  </figure>
  <figure>
    <figcaption>
      Hello
    <figcaption>    
     <img src="http://placehold.it/350x150">
  </figure>

  <figure>
    <figcaption>
      Hello
    <figcaption>    
    <img src="http://placehold.it/350x150">
  </figure>

</article>

CSS：

.gallery {
    width: 100%;
}

.gallery figure {
  display: inline-block;
  width: 30%;
  min-height: 100px;
  margin-right: 10px;
}

.gallery {
    width: 100%;
}

.gallery figure {
  display: inline-block;
  width: 30%;
  min-height: 100px;
  margin-right: 10px;
}

<article class="gallery">

  <figure>
    <figcaption>
        Hello
    <figcaption>    
    <img src="http://placehold.it/350x150">
  </figure>
  <figure>
    <figcaption>
      Hello
    <figcaption>    
     <img src="http://placehold.it/350x150">
  </figure>

  <figure>
    <figcaption>
      Hello
    <figcaption>    
    <img src="http://placehold.it/350x150">
  </figure>

</article>

图像仍然保持相同的尺寸。

Answer 1

使用img { width: 100%; }

.gallery {
    width: 100%;
}

.gallery figure {
  display: inline-block;
  width: 30%;
  min-height: 100px;
  margin-right: 10px;
}
img {
  width: 100%;
}

<article class="gallery">

  <figure>
    <figcaption>
        Hello
    <figcaption>    
    <img src="http://placehold.it/350x150">
  </figure>
  <figure>
    <figcaption>
      Hello
    <figcaption>    
     <img src="http://placehold.it/350x150">
  </figure>

  <figure>
    <figcaption>
      Hello
    <figcaption>    
    <img src="http://placehold.it/350x150">
  </figure>

</article>