如何管理我在同一张卡中从用户那里获取的不同尺寸的图像？

Posted 2023-02-24

【中文标题】如何管理我在同一张卡中从用户那里获取的不同尺寸的图像？

【英文标题】：How to manage image with different dimensions which i take from user in same card?

【发布时间】：2020-11-13 07:21:44

【问题描述】：

图片来自用户发布的数据库，但这里的问题是卡片内的图片尺寸不同。

如果我们固定高度和宽度图片不会保持原来的比例。

但我希望图片保持原始形式，但它的高度或宽度可能会在卡片内发生变化

% for post in show_posts % 
   <div class="col-md-6 col-lg-4 mb-4">
      <div class="card listing-preview">
       <img class="card-img-top" src=" post.photo.url " >
      <div class="card-body">
       <div class="listing-heading text-center">
        <h4 class="text-primary"> person.name </h4>
       </div>
       <hr>
      <div class="row py-2 text-secondary">
           <div class="col-12">
             City:  post.city </div>
           </div>
      <div class="row py-2 text-secondary">
           <div class="col-12">
                 Area:  post.area </div>
             </div>
             <hr>
             <div class="row text-secondary pb-2">
               <div class="col-12">
                 <i class="fas fa-clock"></i>  person.list_date timesince </div>
          </div>
        </div>
        </div>
       </div>
      % endfor %

【参考方案1】：

设置card-img-top的最大高度。

max-height CSS 属性设置元素的最大高度。它 防止 height 属性的使用值变大 比为最大高度指定的值。 - https://developer.mozilla.org

.card-img-top 
   max-height: 300px;
   width: auto;

【讨论】：

通过应用同样的问题，我如图 1 所示

【参考方案2】：

例如，如果您不希望所有图像都具有相同的大小，您应该.card height:300px; width:300px;

.card imgwidth:100%; object-fit: contain;

【讨论】：

使用固定大小是一个不好的解决方案。