css - 圖片的寬度發生變化而高度卻沒有相應變?
問題描述
圖片高度沒有出現相應的變化<h2 class='news__title'>Latest news <a href='http://www.aoyou183.cn/wenda/3626.html#' class='news__more'>+ more</a></h2> <ul> <li class='snippet'> <img src='http://www.aoyou183.cn/wenda/images/dog.jpg' alt='picture of a girl with a large, stuffed dog toy'> <h3 class='snippet__title'><a href='http://www.aoyou183.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 正常情況下給圖片設置寬度,高度會成比例調整;3 這種問題最好借助http://codepen.io/ ,這樣方便別人排查問題。
相關文章:
1. mysql - ubuntu開啟3306端口失敗,有什么辦法可以解決?2. php傳對應的id值為什么傳不了啊有木有大神會的看我下方截圖3. extra沒有加載出來4. javascript - 微信網頁開發從菜單進入頁面后,按返回鍵沒有關閉瀏覽器而是刷新當前頁面,求解決?5. mysql - C#連接數據庫時一直這一句出問題int i = cmd.ExecuteNonQuery();6. mysql日期類型默認值’0000-00-00’ 報錯7. 求救一下,用新版的phpstudy,數據庫過段時間會消失是什么情況?8. mysql replace 死鎖9. windows - asp.net連接上mysql之后如何調用?比如下面的登錄驗證功能怎么實現10. android - 安卓做前端,PHP做后臺服務器 有什么需要注意的?
