Question

我想在页面中显示特定文件中的所有图像。我做了但是我不能裁剪它就像在一行上显示4个图像，并且高度与宽度相同。

这是用于显示来自文件的图像的PHP代码：

db.points.find( { 'Points.Time': { $gte: 123412341234 } } )

这是CSS：

Points.find({ 'Points.Time': { $gte: 123412341234 } })

我想以相同的宽高比显示所有的imeges。因为如果我有一个肖像图像，这个图像的高度比其他图像高。如果我给“max-heigh”调整图像大小并且看起来不太好...... 我尝试使用剪辑，但我无法做出好事。我对谷歌有所了解，但找不到任何对我好的东西。

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>

Answer 2

这个有效！非常感谢你的帮助！

我离开这里，我做了什么。 HTML / PHP：

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

<script>
  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";
}
</script>

CSS：

.galery-cont {
  padding-top: 210px;
  width: 100%;
  height: auto;
  background: white;
}

.img-cropped {
  border: solid 5px white;
  object-fit: cover;
  object-position: center center;
  width: 25%;
}

但在这里我还有另一个问题...... :)当我点击图片（列表中的随机图片）打开像Modal这样的幻灯片时，我该如何制作，第一张图片是我点击的图片。

如何裁剪图像以获得1：1的宽高比CSS

2 个答案: