Auto-resize images with jQuery to fit container

Auto-resize images with jQuery to fit container

HTML

<section class="services-wrap">
  <h3>OUR SERVICE</h3>
  <hr>
  <div class="services-flex">
    <div id="service-box" class="flex-box">
      <img class="service-img" src="http://douhua.wpabc.cc/topic/2018/06/136/attachment-5nTRzB93c5b627ef83fc4.jpg">
    </div>
    <div id="service-box" class="flex-box">
      <img class="service-img" src="http://douhua.wpabc.cc/topic/2018/06/136/attachment-5nTRzB93c5b627ef83fc4.jpg">
    </div>
  </div>
</section>

CSS

/* ## Services */
.services-wrap {
  text-align: center;
  padding-top: 4rem;
}

.services-flex {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.service-img {
  min-height: 100% !important;
  /*width: 100%;*/
}

@media screen and (min-width: 768px) {
  .services-flex {
    flex-direction: row;
    padding: 0 4rem;
    flex-wrap: wrap;
    align-items: stretch;
    max-width: 500px;
    margin: auto;
  }
  .flex-box {
    flex: 1 30%;
    /*margin: 1rem;*/
  }
}