css圖片等比例裁剪
阿新 • • 發佈：2017-12-25
-i mark src 設置 顯示 png cdn hid 如果
需求：
圖片的寬高是不固定的，但是外部盒子是有固定大小的。
圖片的寬度和盒子保持一致，並且是水平居中顯示，即兩邊是裁剪的
圖片的高度是由盒子寬度控制的，等比例縮放，多余的被裁減掉
原圖：
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> * { padding: 0; margin: 0; } .box-img { width: 230px; height: 230px; box-sizing: border-box; border: 1px solid red; overflow: hidden; text-align: center; position: relative; } img.one { display: inline-block; /*一個圖片在一個寬高固定的盒子裏，如果只設置圖片寬度，那麽高度是自適應的。*/ width: 228px; position: absolute; left:0; bottom:0; } img.two { display: inline-block; width: 228px; } img.three { max-width: 228px; max-height: 228px; display: inline-block; } </style> </head> <body> <!-- 水平方向上的解決方案 --> <div class="box-img"> <img src="https://img.alicdn.com/bao/uploaded/i3/740173676/TB1Y81Ad5qAXuNjy1XdXXaYcVXa_!!0-item_pic.jpg_400x400.jpg" class="one"> </div> <div class="box-img"> <img src="https://img.alicdn.com/bao/uploaded/i3/740173676/TB1Y81Ad5qAXuNjy1XdXXaYcVXa_!!0-item_pic.jpg_400x400.jpg" class="two"> </div> <div class="box-img"> <img src="https://img.alicdn.com/bao/uploaded/i3/740173676/TB1Y81Ad5qAXuNjy1XdXXaYcVXa_!!0-item_pic.jpg_400x400.jpg" class="three"> </div> </body> </html>
效果：
第一種是底部對齊，裁剪頂部
第二種是頂部對齊，裁剪底部
第三種是在固定容器內等比例顯示圖片
css圖片等比例裁剪