如何用CSS将图片裁剪为1:1比例？实现一行4张等宽等高展示

你当前的CSS只设置了图片宽度，但因为原图宽高比不一致，所以没法自动变成规整的1:1正方形。要实现这个效果，我们可以通过容器包裹图片的方式，结合CSS的object-fit属性来裁剪图片，同时保证容器是正方形，这样既能维持一行4张的布局，又能让所有图片显示为等宽等高的1:1比例。

第一步：修改PHP代码，给每张图片添加容器 #

把原来直接输出<img>的代码改成用容器包裹，这样我们可以通过容器来控制尺寸：

<?php 
$files = glob("galery/*.*"); 
for ($i=0; $i<count($files); $i++) { 
    $num = $files[$i]; 
    echo '<div class="img-container"><img class="img-display" src="'.$num.'" alt="random image"></div>'; 
} 
?>

第二步：更新CSS样式实现1:1裁剪与布局 #

现在我们给容器设置正方形尺寸，让图片在容器内按比例裁剪，同时保持一行4张的排列：

/* 容器负责控制尺寸和布局 */
.img-container {
    width: 25%;
    padding-bottom: 25%; /* 利用padding百分比基于宽度的特性，实现正方形容器 */
    position: relative;
    float: left; /* 让容器横向排列 */
    box-sizing: border-box; /* 把内边距、边框算进宽度，避免换行 */
    padding: 5px; /* 控制图片之间的间距 */
}

/* 图片负责填充容器并裁剪 */
.img-display {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 核心属性：按比例缩放图片，填满容器，超出部分裁剪，不会变形 */
    border: solid 5px white;
}

关键细节说明： #

• padding-bottom: 25%：因为容器宽度是25%，所以设置相同百分比的padding-bottom就能得到完美的正方形容器，这是前端实现固定宽高比容器的经典技巧。
• object-fit: cover：这个属性会让图片保持原有比例缩放，刚好填满容器，多余的部分会被自动裁剪，既保证了1:1的显示效果，又不会让图片拉伸变形。
• box-sizing: border-box：确保容器的内边距和边框不会额外增加宽度，避免一行放不下4个容器导致换行。

如果你不想用浮动布局，也可以用更现代的Flexbox方案，代码会更简洁：

/* 给所有图片容器加一个外层包裹 */
.gallery-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.img-container {
    width: 25%;
    padding-bottom: 25%;
    position: relative;
    box-sizing: border-box;
    padding: 5px;
}

.img-display {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: solid 5px white;
}

对应的PHP代码需要在外层加上gallery-wrapper容器：

<?php 
echo '<div class="gallery-wrapper">';
$files = glob("galery/*.*"); 
for ($i=0; $i<count($files); $i++) { 
    $num = $files[$i]; 
    echo '<div class="img-container"><img class="img-display" src="'.$num.'" alt="random image"></div>'; 
} 
echo '</div>';
?>

这样不管原图的宽高比是什么样，都会被裁剪成整齐的1:1正方形，并且完美地一行展示4张啦！

内容的提问来源于stack exchange，提问作者Andrei Pintea