Bootstrap: Add .img-fluid alternative that stretches the image to fill its parent's width

[christian-fries]

Often you want an image to fill the whole width of the containing element. .img-fluid can be used to fill the containing element and scale down, but there's no option for scaling up. If the containing element is bigger than the actual image size, even if it's only some pixels in some special viewports, the image won't fill the whole element. This is bad for the design, in most cases worse than upscaling an image for some pixels.

For this case, we created a class .img-fill which sets display: block; width: 100%; height: auto;. The frontend developer then can decide if he want's images to scale up and down by using .img-fill or if he only wants them to scale down by using .img-fluid.

I propose this as an official feature of Bootstrap 4.

[mdo]

Going to put on this since .w-100 should take care of this for you.