flex内的图像不会调整大小

Question

我真的没有头绪。我已经使用flex属性完成了这个div，它工作正常，但如果我调整屏幕大小，图像和文本不会相应地调整大小，一切都在下一行，所有内容都保持相同的大小。

#qualities {
  flex-wrap: wrap;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-orient: horizontal; 
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  flex-direction: row;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  justify-content: center;

  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;  
  align-items: center;
  height: 100%;
  width:100%;
  position: relative;
  background-color:#eef199;
  padding-top: 100px;
  padding-bottom: 100px;
}

#qualities img {
  margin: auto;
  width: 50%;
}

#qualities p {
  margin: auto;
  width: 70%;
  font-size: 2em;
  color: white;
}

.cell {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto; 
  padding: 10px;
  margin: 10px;
  text-align: center;
}
@media(max-width: 768px) {
  #body #testata #container #beforehome #qualities video {
    height: auto;
  }

  .cell {height: 20%;}
  img {height: 10%;}
}

<div id="qualities">
  <div class="cell">
    <img src="http://www.md-health.com/images/1HT03553/Banana21.jpg"/>
  </div>
  <div class="cell">
    <img src="http://www.md-health.com/images/1HT03553/Banana21.jpg"/>
  </div>
  <div class="cell">
    <img src="http://www.md-health.com/images/1HT03553/Banana21.jpg"/>
  </div><br />
  <div class="cell">
    <p>Diverse qualità di mandorle sono usate per scopi differenti: le mandorle più comuni
      sono quelle dolci, usate spesso anche per condimento di piatti, poi ci sono le mandorle
      amare, usate spesso per l'olio di mandorla e infine le armelline, che sono le mandorle 
      contenute all'interno dei frutti come pesca o albicocca, le quali vengono trattate e
      una volta sgusciate sono come mandorle.</p>
  </div>
</div>

我只想让事物在div中居中，并在调整窗口大小时调整大小。