在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 圖片的不規(guī)則布局問題？

圖片的不規(guī)則布局問題？

clipboard.png

clipboard.png

clipboard.png

如上三張截圖中的圖片布局如何實(shí)現(xiàn)？

圖片隨便上傳，橫版圖片希望上傳后，依舊橫版顯示，豎版圖片依舊豎版顯示，橫豎版隨意組合，圖片盡可能顯示完整；

遇到的問題：
1.橫豎版圖片的判斷問題？（圖片必須預(yù)載或者預(yù)先知道長寬嗎？）
2.橫豎混合排放時(shí)，橫版圖片的寬度設(shè)置多少，豎版設(shè)置多少，橫豎版圖片個數(shù)如何確定？
3.橫豎混合時(shí)，豎版圖片的高度如何與橫版等高？

另一個解決方案 ： https://github.com/xieranmaya...；
中文翻譯 ： https://zhuanlan.zhihu.com/p/...

回答
編輯回答
半心人

flex就可以完美搞定

html：

<div class="m-gallery">
    <div class="item"><img src=""></div>
    <div class="item"><img src=""></div>
    <div class="item"><img src=""></div>
    ......
</div>

css:

.m-gallery{
   display: flex;
  // 采用flex布局
  flex-wrap: wrap;
  // 規(guī)定一行放不下flex元素時(shí)自動換行
}

.m-gallery .item{
  height: 100px;
  flex-grow: 1;
  // 每個flex元素占的寬度相同
  margin: 2px;
}
.m-gallery .item img{
  height: 100px;
  min-width: 100%;
  max-width: 100%;
  object-fit: cover;
  // 使圖片等比拉伸，可能會被裁減
  vertical-align: bottom;
  display: block;
}
2018年5月4日 20:49
編輯回答
半心人

object-fit屬性

2018年9月3日 04:35
編輯回答
糖果果

以前看過類似的文章講解百度圖片展現(xiàn)頁面的，原理不難

2017年2月9日 06:10
編輯回答
幼梔

圖片在哪里看到，直接查看網(wǎng)頁源代碼，調(diào)試一下，找出影響的css就知道了，如果不是css就是js控制的

2018年6月21日 20:48
編輯回答
來守候

木桶布局，實(shí)現(xiàn)原理及實(shí)例請看
http://www.jianshu.com/p/57ac...

2017年12月18日 12:40
編輯回答
怪痞

請使用masonry.js

2018年8月11日 23:22
編輯回答
扯機(jī)薄

這個布局大概率會使用flex吧，一般而言這樣的排版會要求圖片的固定尺寸或者寬高比【上傳者自己修剪、使用background-clip裁剪或者后端進(jìn)行比例裁剪】，

  1. 不知道是不是題主想問的，前端很難判斷圖片是橫豎翻轉(zhuǎn)了，

  2. 尺寸不應(yīng)該按照設(shè)計(jì)稿來嗎？

  3. 這里應(yīng)該不用考慮橫豎啊，不是上傳是啥就是啥嗎？

以上答案可能不是題主要的，題主是不是設(shè)計(jì)得是每一排不知道放多少圖片？每一排有多少橫豎？這樣的話題主只要考慮總體的寬高是否固定，使用flex布局比較方便，會自動縮放和換行。

2017年4月11日 03:41