php - 如何裁剪图像以具有 1 :1 aspect ratio CSS

Question

我想在页面中显示来自特定文件的所有图像。我做到了，但我无法裁剪它，比如连续显示 4 张图像并且高度与宽度相同。

这是显示来自文件的图像的 php 代码:

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

这是 CSS:

.img-display {
  width: 25%; /* This make photos to aling 4 on a row*/
  border: solid 5px white; /* This is for make a white spece between photos */
}

我想以相同的纵横比显示所有图像。因为如果我有一个肖像图像，这个图像的高度比其他图像大。如果我给“最大高度”调整图像大小并且看起来不太好......我尝试使用剪辑，但我做不出什么好东西。我用谷歌搜索，但找不到适合我的东西。

Answer 1

你可以使用这个:

.img-cropped {
    object-fit: cover;
    object-position: center center;
    width: 250px;
    height: 250px;
}

它的浏览器支持表:https://caniuse.com/#feat=object-fit(感谢@giorgio)

这将以 250x250 的尺寸显示图像，并且图像将覆盖以中心为调整大小原点的容器。

如果您不知道图像的确切尺寸，并且将使用百分比作为宽度，那么您需要一些 javascript 来平衡图像的宽度和高度。

例如:

var cats = document.querySelectorAll(".img-cropped");
var width = cats[0].clientWidth;
console.log(width);
for (var i = 0; i < cats.length; i++) {
  cats[i].style.height = width + "px";
}

.container {
  width: 80%;
  margin: 0 auto;
}

.img-cropped {
  object-fit: cover;
  object-position: center center;
  width: 24%;
}

<div class="container">
  <img class="img-cropped" src="http://placekitten.com/300/350">
  <img class="img-cropped" src="http://placekitten.com/300/350">
  <img class="img-cropped" src="http://placekitten.com/300/350">
  <img class="img-cropped" src="http://placekitten.com/300/350">
  <img class="img-cropped" src="http://placekitten.com/300/350">
  <img class="img-cropped" src="http://placekitten.com/300/350">
  <img class="img-cropped" src="http://placekitten.com/300/350">
  <img class="img-cropped" src="http://placekitten.com/300/350">
  <img class="img-cropped" src="http://placekitten.com/300/350">
</div>