CSS rwd 圓形img裁切

css

Zaku 2018-08-14 11:56:57 ‧ 5335 瀏覽

分享至

圖片可能分成三種狀況，長方形，正方形，直立長方形，下面這篇有講解三種分別怎麼切
https://segmentfault.com/a/1190000003931845

但有個問題是這樣長寬就定死了，有辦法做到圖片縮放嗎，根據視窗區塊的變化

看更多先前的討論...收起先前的討論...

ccutmis iT邦高手 2 級 ‧ 2018-08-14 16:54:02 檢舉

可以的我寫了一個簡單的範例給你參考
http://www.web3d.url.tw/d3/testChangeOvalimageSize.htm
網頁裡的圖片初始大小是250x250，你試試按下::Resize:: 圖片會放大到500x500
原理很簡單就是用一個div作img的外框架，由這個div決定img的寬高，oval設定也是寫在div，div裡面包進去的img圖設定display:inline-block;width:100%;height:100%; 大致上是這個思路...小小心得希望有幫助。直接看原始碼就能看到我怎麼做的，很簡單。

Zaku iT邦新手 3 級 ‧ 2018-08-15 09:19:14 檢舉

感謝大大，這樣大小可以切不同size，但還是會定死為固定大小(250 or 500)，不知可否被壓縮空間時會自動縮放

ccutmis iT邦高手 2 級 ‧ 2018-08-15 09:45:16 檢舉

你試試250或500改其它數字再按Resize看看可以只改寬或高

Zaku iT邦新手 3 級 ‧ 2018-08-15 16:36:05 檢舉

只改寬或高會變形XD，我是想說可否畫面縮放時，他會250,249,248,247.....200，自動縮放。

窮嘶發發發 iT邦高手 1 級 ‧ 2018-08-16 11:23:55 檢舉

<body><div style="width:100%; ...."><img style="width:XX%; min-width:200px; height:auto; min-height:200px; display:inline-block;"></div></body>
大約就這樣，用繼承的方式去處理

登入發表討論