[css] 不等寬圖片水平+滿版+對其擺放

css

Zaku 2019-04-22 11:41:40 ‧ 2738 瀏覽

分享至

想請問一下假定兩張或多張圖片，若都等高只要設定寬度跟換行就可以方便的排列，但如果圖片夾雜橫向圖片(橫向較長)跟直向的圖片(直向較長)，版面夠大時可以設成固定高度，致中，但手機畫面時該如何設置，控制成水平切線看起來是整齊的，滿版又等高?

ccutmis iT邦高手 2 級 ‧ 2019-04-22 12:32:57 檢舉

參考看看
<!DOCTYPE html>
<html><head><meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
*,html{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
body{background:#333;text-align:center;}
img{width:45vw;vertical-align:middle;border:solid 5px #fff;}
.himg{width:calc(45vw/1.618);}
</style></head>
<img src="寬.png" />
<img src="寬.png" />
<hr />
<img src="寬.png" />
<img src="高.png" class="himg"/>
<hr />
<img src="高.png" />
<img src="高.png" />
<hr />
<img src="寬.png" />
<img src="高.png" class="himg"/>
<hr />
<img src="高.png" class="himg"/>
<img src="寬.png" />
</body></html>

登入發表討論