css - 圖片的寬度發生變化而高度卻沒有相應變？

問題描述

<h2 class='news__title'>Latest news <a href='http://www.wxshucaidpc.com/wenda/3626.html#' class='news__more'>+ more</a></h2> <ul> <li class='snippet'> <img src='http://www.wxshucaidpc.com/wenda/images/dog.jpg' alt='picture of a girl with a large, stuffed dog toy'> <h3 class='snippet__title'><a href='http://www.wxshucaidpc.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/ ，這樣方便別人排查問題。