css - 圖片的寬度發(fā)生變化而高度卻沒(méi)有相應(yīng)變?
問(wèn)題描述
圖片高度沒(méi)有出現(xiàn)相應(yīng)的變化
<h2 class='news__title'>Latest news <a href='http://www.b3g6.com/wenda/3626.html#' class='news__more'>+ more</a></h2> <ul> <li class='snippet'> <img src='http://www.b3g6.com/wenda/images/dog.jpg' alt='picture of a girl with a large, stuffed dog toy'> <h3 class='snippet__title'><a href='http://www.b3g6.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;}疑惑
為什么圖片的高度不會(huì)隨著寬度一起變化?理論效果應(yīng)該如此:
問(wèn)題解答
回答1:1 > 是直接后代元素選擇器(子選擇器) 所以第一個(gè)樣式是無(wú)效的;2 正常情況下給圖片設(shè)置寬度,高度會(huì)成比例調(diào)整;3 這種問(wèn)題最好借助http://codepen.io/ ,這樣方便別人排查問(wèn)題。
相關(guān)文章:
1. 網(wǎng)頁(yè)爬蟲(chóng) - 如何使用使用java抓取信息并制作一個(gè)排名系統(tǒng)?2. javascript - immutable配合react提升性能?3. shell - mysql更新錯(cuò)誤4. mysql - 在log日志中已知用戶的某一步操作,如何獲取其上一步操作?5. php對(duì)mysql提取數(shù)據(jù)那種速度更快6. javascript - vue中使用prop傳遞數(shù)據(jù)問(wèn)題7. DADB.class.php文件的代碼怎么寫(xiě)8. python小白 自學(xué)看書(shū)遇到看不懂的地方9. 如何設(shè)置一個(gè)無(wú)限循環(huán)并打破它。(Java線程)10. javascript - avalon.js ms-on 事件綁定無(wú)效 ?

網(wǎng)公網(wǎng)安備