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

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 而不是图像。这就是为什么您的所有图像仍保持原始分辨率的原因。将以下 sn-p 添加到您的 CSS 将使 div 中的所有图像为 100px x 100px。

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