bootstrap4中card图片列表完美显示

（最后更新于2022-04-08） 分类: 技术文档 评论(0) 阅读(65105) 赞(0)

使用thinkcmf搞站，系统中自带一个资源管理，就是你所上传的图片、文件等都统一列表形式展示出来，那些文件图片在使用或者已经被删除了，都可以清楚的展示出来，但是个人感觉文件列表形式展示的很是不完美，想看具体的图片还需要点击查看，所有想到将这个页面改成直接显示图片的形式，这样可以一目了然的看到图片信息，最终效果如下：

我们平时上传的图片大小是不确定的，那么怎么才能让图片完美的展现出来呢？经过查询资料得知bootstrap4中有一个embed实用程序，你可以在这种情况下使用它。它有16x9和4x3的宽高比，但你可以很容易地添加你自己的。

在这个演示中，提供了两个图像，一个是爱奇艺图片，另一个是支付宝领红包的，这两个图像看起来是一样的，并且填充了可用的纵横比。

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
 
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="card h-100 border-0 shadow">
        <div class="card-img-top">
          <div class="embed-responsive embed-responsive-4by3">
            <div class="embed-responsive-item">
              <img src="https://iot.21863.cn/upload/default/20220107/e8b32f81ad2403ca95deb9b0432718c9.jpeg" alt="" class="img-fluid w-100" />
            </div>
          </div>
        </div>
        <div class="card-body">
          <p>Card content goes here</p>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card h-100 border-0 shadow">
        <div class="card-img-top">
          <div class="embed-responsive embed-responsive-4by3">
            <div class="embed-responsive-item">
              <img src="https://iot.21863.cn/upload/default/20211012/6c24f5b0f055afdeef5c416a83e881d2.jpg" alt="" class="img-fluid w-100" />
            </div>
          </div>
        </div>
        <div class="card-body">
          <p>Card content goes here</p>
        </div>
      </div>
    </div>
  </div>
</div>

可以很完美的解决图片大小不同的缩放问题了，下面我将thinkcmf中的资源管理的模板一并放上，给有需要的人：

THINKCMF资源管理模板文件
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<php>$status=['不可用', '可用'];
             $asset_img_suffixes=['bmp','jpg','jpeg','png','gif','tiff'];
             $asset_ile_suffixes=['csv','xls','doc','docx'];
        </php>
        <div class="row">
            <foreach name="assets" item="vo">
                <div class="col-lg-3 col-xl-2 col-md-3 col-6">
                    <div class="card mb-3">
                        <div class="card-img-top">
                            <div class="embed-responsive embed-responsive-4by3">
                                <div class="embed-responsive-item">
                                  <if condition="in_array(strtolower($vo['suffix']),$asset_img_suffixes)">
                                        <img src="{:cmf_get_image_preview_url($vo['file_path'])}" title="{$vo.file_path}" alt="{$vo.filename}" class="img-fluid w-100">
                                  <elseif condition="in_array(strtolower($vo['suffix']),$asset_ile_suffixes)">
                                        <i class="fa fa-file-word-o fa-fw"></i>
                                  </if>
                                </div>
                            </div>
                            
                        </div>
                      <div class="card-body">
                        <h6 class="card-subtitle mb-2 text-muted">用户ID:{$vo.user_id} {$vo.user_login} {$vo.user_nickname}</h6>
                        <a class="card-link">{$vo.file_size/1024|round}KB</a>
                        <a class="card-link"><if condition="!file_exists('upload/'.$vo['file_path'])"><span class="text-danger">文件丢失</span><else />{$status[$vo['status']]}</if></a>
                        <a href="{:url('AdminAsset/delete',array('id'=>$vo['id']))}" class="card-link btn btn-sm btn-danger js-ajax-delete float-right mb-0">{:lang('DELETE')}</a>
                      </div>
                    </div>
                </div>
            </foreach>
        </div>
        <div class="pagination">{$page|default=''}</div>

 

 

除特别注明外，本站所有文章均为电信物联卡官网原创，转载请注明出处来自http://blog.21863.cn/post/1044.html

赞一下 打赏 生成封面
bootstrap4中card图片列表完美显示 bigger封面
  • 0 个人已赞
上一篇

下一篇

相关文章

参与评论