在保持纵横比的同时在正方形容器中填充图像

Question

我试图在CSS中制作一个图像网格,这些图像是非正方形的随机大小的图像.有没有人有解决方案用图像填充固定大小的div内的所有空间？

看看我的例子(蓝色是固定大小的div,里面的图像是红色的:

Answer 1

你可以使用css,background-size:cover;

<style>
    .img1 {
        background-image: url(microsoft-logo.png);
    }
    .img2 {
        background-image: url(google-icon.png);
    }
    .img3 {
        background-image: url(Azend_Loggo.png);
    }
    .img-cover {
        width: 50px;
        height: 50px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<div class="img-cover img1">

</div>
<div class="img-cover img2">

</div>
<div class="img-cover img3">

</div>