图片高度没有出现相应的变化

HTML

  <h2 class="news__title">Latest news <a href="#" class="news__more">+ more</a></h2>
          <ul>
            <li class="snippet">
              <img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
              <h3 class="snippet__title"><a href="#">Gastropub distillery Marfa farm-to-table</a></h3>
              <p class="snippet__description">Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache.
              Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.
              </p>
            </li>

CSS

.snippet__thumbnail > img {
    width: 100;
}

.snippet {
    display: flex;
    flex-wrap: wrap;
}

.snippet__thumbnail {
    order: 1;
    width: 30%;
}

.snippet__title {
    order: 0;
    width: 100%;
    margin: 0 0 0.5em;
}

.snippet__description {
    order: 2;
    max-width: 70%;
    margin: 0;
    padding: 0 0 0 1em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

疑惑

为什么图片的高度不会随着宽度一起变化？
理论效果应该如此：