如何裁剪图像以使其大小相同

Question

我有一个图片库，希望所有图片都具有相同的尺寸。这是我的CSS。我正在关注此tutorial。

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 350px) {
  .responsive {
    width: 45.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 250px) {
  .responsive {
    width: 25%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

这是问题的直观表示。我想以火箭为例。

Answer 1

看看ImageResizer.net。它具有您所需的一切，包括用于SQL Server集成和裁剪并保留纵横比的代码示例：

http://imageresizing.net/

最受欢迎的功能是免费和开源的：

Resizing, cropping, rotating, flipping
Borders, drop-shadows, padding, background colors
Adjustable Jpeg compression. Multi-page tiff viewing
Animated GIF frame selection. Comprehensive, real-time diagnostics
Basic GIF and PNG encoding
Gradient generation

Answer 2

将其用于固定大小

.coverDiv {
    width: 150px; /* or what you want */
    height: 150px; /* or what you want */
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #eee;
    background-position: center center;
}

或以此百分比

.coverDiv {
    width: 25%; /* or what you want */
    padding-bottom: 25%; /* or what you want */
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #eee;
    background-position: center center;
}

然后以内联样式将图像URL添加为背景

 <div class="coverDiv" style="background-image: url(YOUIMAGEURL);></div>

Answer 3

您在CSS中使用了以下内容。

div.gallery img {
  width: 100%;
  height: auto;
}

请注意，高度为“自动”。您可以尝试将其固定为某个常数，然后查看是否可行。这是我的最佳猜测（看不到您拥有的html文件）。

Answer 4

您可以尝试使用object-fit。下面的示例技巧使用伪元素来控制图像显示高度并保持响应度。您可以声明一个固定的height并根据需要更改媒体查询中的值。

.image-gallery {
  display: flex;
  flex-wrap: wrap;
}

.image-wrapper {
  flex: 0 0 25%;
  position: relative;
}

.image-wrapper img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-wrapper:before {
  content: "";
  display: block;
  padding-bottom: 75%; /* https://stackoverflow.com/a/10441480/483779 */
}

<div class="image-gallery">
  <div class="image-wrapper"><img src="https://picsum.photos/800/800"></div>
  <div class="image-wrapper"><img src="https://picsum.photos/800/700"></div>
  <div class="image-wrapper"><img src="https://picsum.photos/800/600"></div>
  <div class="image-wrapper"><img src="https://picsum.photos/800/500"></div>
  <div class="image-wrapper"><img src="https://picsum.photos/800/400"></div>
  <div class="image-wrapper"><img src="https://picsum.photos/800/300"></div>
</div>