用object-fit:cover
object-fit屬性詳解
object-fit:CSS 屬性指定替換元素的內容應該如何適應到其使用的高度和寬度確定的框。
- object-fit:fill 被替換的內容大小可以填充元素的內容框，整個對象將完全填充此框，如果對象的寬高比不匹配其框的寬高比，你們對象會被拉伸。
- object-fit:contain 被替換的內容將被縮放，以在填充元素的內容框時保持其寬高比，整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加
- object-fit:cover 被替換的內容大小保持其寬高比，同事填充元素的整個內容框，如果對象的寬高比與盒子的寬高比不匹配，改對象將被裁剪以適應。
- object-fit:none 被替換的內容尺寸不會被改變
- object-fit:scale-down 內容的尺寸就像是指定了none或contain，取決於哪一個將導致更小的對象尺寸。
兼容性支持：
pc:基本支持，IE不支持。
mobile:基本支持，安卓4.4.4 ie不支持
