css - 图片的宽度发生变化而高度却没有相应变？

问题描述

<h2 class='news__title'>Latest news <a href='https://www.haobala.com/wenda/3626.html#' class='news__more'>+ more</a></h2> <ul> <li class='snippet'> <img src='https://www.haobala.com/wenda/images/dog.jpg' alt='picture of a girl with a large, stuffed dog toy'> <h3 class='snippet__title'><a href='https://www.haobala.com/wenda/3626.html#'>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;}疑惑

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

问题解答

1 > 是直接后代元素选择器（子选择器） 所以第一个样式是无效的；2 正常情况下给图片设置宽度，高度会成比例调整；3 这种问题最好借助http://codepen.io/ ，这样方便别人排查问题。