Question

我试图让我的所有图像大小相同，每张图像之间有一点填充/空格。我使用的代码似乎不起作用，图像保持原始大小（并且都是不同的大小）。

CSS

.gallery {
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5%;
}

HTML

<form id="Form1" method="post" role="form" enctype="multipart/form-data">       
    <label>
        <input type="text" id="albumname" name="albumname" class="form-control" placeholder="Album Name" required autofocus>
    </label>

    <div class="input-group">
        <label for="file-upload" class="custom-file-upload">
            <i class="fa fa-cloud-upload"></i> Choose Files...
        </label>
        <input id="file-upload" type="file" multiple/>          
        <button class="btn btn-lg btn-primary btn-block btn-signin-upload" type="submit">Upload</button>
    </div>  

    <div class="gallery"></div>
</form>

有谁知道这个问题？它用于在上传之前预览许多图像。

Answer 1

在您的CSS中，您有一个名为.gallery的类，但这指的是div而不是图像。这就是为什么你的所有图像仍然保持原始分辨率的原因。将以下代码段添加到CSS将使div中的所有图像都为100px x 100px。

.gallery img {
    height: 100px;
    width: 100px;
}

使用css规则制作图像大小相同 - 样式不改变图像

1 个答案: