20180502_如何在div里正常显示大图小图长图窄图等各种类型的图片

[openks]

在宽高固定的div里如何最正常的显示图片
如窄图，长图，大图需截取，小图放大

[openks]

当被问到这个问题是脑袋里一片空白，只在想图片怎么处理，根本没想到还可以用 背景图

            background-image: url('https://dummyimage.com/60x60');
            background-position: center;
            background-size: cover;

这样就可以轻松实现小图放大，大图截取，长图窄图截取功能

[openks]

今天面试别人也问了这个问题，他说用图片在div中垂直居中，当时感觉这种方案应该有问题，没想出来问题在哪里(没说小图的情况，只说了宽图和长图)，

1. 拿小图就很能说明问题了 如果图片过小就会垂直居中于父容器
2. 如果长图的高度低于父容器就会出现demo中的问题 ，宽度能正常填充而高度无法填充

demo在这里