css - 圖片的寬度發(fā)生變化而高度卻沒有相應變?
問題描述
圖片高度沒有出現(xiàn)相應的變化<h2 class='news__title'>Latest news <a href='http://m.cgvv.com.cn/wenda/3626.html#' class='news__more'>+ more</a></h2> <ul> <li class='snippet'> <img src='http://m.cgvv.com.cn/wenda/images/dog.jpg' alt='picture of a girl with a large, stuffed dog toy'> <h3 class='snippet__title'><a href='http://m.cgvv.com.cn/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:1 > 是直接后代元素選擇器(子選擇器) 所以第一個樣式是無效的;2 正常情況下給圖片設(shè)置寬度,高度會成比例調(diào)整;3 這種問題最好借助http://codepen.io/ ,這樣方便別人排查問題。
相關(guān)文章:
1. python - Django有哪些成功項目?2. 實現(xiàn)bing搜索工具urlAPI提交3. Python從URL中提取域名4. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)5. 關(guān)于mysql聯(lián)合查詢一對多的顯示結(jié)果問題6. 數(shù)據(jù)庫 - Mysql的存儲過程真的是個坑!求助下面的存儲過程哪里錯啦,實在是找不到哪里的問題了。7. node.js - 微信小程序websocket連接問題8. 直接打字符不可以嗎?>和>有區(qū)別嗎9. node.js - windows10下的npm全局路徑的復原或者將npm徹底刪除?10. Python中使用超長的List導致內(nèi)存占用過大
