如何使图像尺寸相同或尺寸相同？答案

【问题标题】：How to make the images same fit or same size?如何使图像尺寸相同或尺寸相同？
【发布时间】：2020-08-15 05:07:00
【问题描述】：

我正在 django 中开发一个电子商务项目，我已经为图像创建了一个模型，并尝试调整图像的大小或缩略图，但这似乎不适用于我的情况，或者这可能是前端问题。当供应商上传图片产品时，我希望图片产品适合并且看起来在同一行，而不管图片原始尺寸如何。我不希望他们像这张照片那样显示

所以我希望价格和按钮在同一行。我尝试调整图像大小但不起作用

【问题讨论】：

已在此链接上回答：stackoverflow.com/questions/45379727/…
@psychodeveloper 我尝试了该解决方案，但它不起作用:(

标签： javascript css django e-commerce

【解决方案1】：

我不是前端人员，但我认为这应该会有所帮助......这就是关于如何获取从 ImageField 获得的图像的大小

<img src="{{ image.url }}" width="{{ image.width }}" height="{{ image.height }}"/>

【讨论】：

【解决方案2】：

在 CSS 中使用 object-fit

img{
  width:350px;
  height:200px;
  border:1pt solid #f00;
}
.cover{
  object-fit: cover;
  object-position: center;
}
.contain{
  object-fit: contain;
}

<img src="https://images.unsplash.com/photo-1508921912186-1d1a45ebb3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"><br/>(force size)
<hr/>
<img class="cover" src="https://images.unsplash.com/photo-1508921912186-1d1a45ebb3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"><br/>bobject-fit: cover #auto crop
<hr/>
<img class="contain" src="https://images.unsplash.com/photo-1508921912186-1d1a45ebb3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"><br/>object-fit:contain

【讨论】：