在保持纵横比的同时在方形容器中填充图像 [英] Fill an image in a square container while keeping aspect ratio

问题描述

我试图在CSS中制作一张网格图像，不是随机大小的图像不是正方形。
有没有人有解决方案来填充固定大小的div内的所有空间与图像？

I am trying to make a grid of images in CSS, out of random sized images that are not square. Does anyone have a solution to filling all the space inside a fixed sized div with the image ?

看我的例子（蓝色是一个固定大小的div和红色在它的图像中：

See my example (blue is a fixed size div and red in the image inside it:

推荐答案

您可以使用css，background-size：cover;

You can use the 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>

这篇关于在保持纵横比的同时在方形容器中填充图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！