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

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

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

【问题讨论】:

标签: 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

    【讨论】:

      猜你喜欢
      • 2013-07-21
      • 2012-03-15
      • 1970-01-01
      • 1970-01-01
      • 2015-06-22
      • 2015-02-28
      • 1970-01-01
      • 2014-03-07
      • 2023-03-03
      相关资源
      最近更新 更多