css图片等比例裁剪
生活随笔
收集整理的這篇文章主要介紹了
css图片等比例裁剪
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
需求：
圖片的寬高是不固定的，但是外部盒子是有固定大小的。
圖片的寬度和盒子保持一致，并且是水平居中顯示，即兩邊是裁剪的
圖片的高度是由盒子寬度控制的，等比例縮放，多余的被裁減掉
原圖：
代碼：
<!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" alt="" class="one"> </div><div class="box-img"><img src="https://img.alicdn.com/bao/uploaded/i3/740173676/TB1Y81Ad5qAXuNjy1XdXXaYcVXa_!!0-item_pic.jpg_400x400.jpg" alt="" class="two"> </div><div class="box-img"><img src="https://img.alicdn.com/bao/uploaded/i3/740173676/TB1Y81Ad5qAXuNjy1XdXXaYcVXa_!!0-item_pic.jpg_400x400.jpg" alt="" class="three"> </div></body></html>效果：
第一種是底部對齊，裁剪頂部
第二種是頂部對齊，裁剪底部
第三種是在固定容器內(nèi)等比例顯示圖片
總結(jié)
以上是生活随笔為你收集整理的css图片等比例裁剪的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 融合时代 存储迎来无限可能
- 下一篇： 酷客多小程序实现小程序之间跳转功能，让小