图片 100%显示. img 全部显示.

让每个图片都铺满 ,同样的大小; 只要给 img 设置固定的高度, 宽度就可以了.

-----------------------

html:

 1 <div class="content">
 2 
 3             <div class="course">
 4                 <div class="courseImg"><img src="YYFramework/Public/01.png" alt="课程图片"></div>
 5                 <div class="courseName">计算机</div>
 6                 <button type="button" class="btn btn-primary courseButton">
 7                     <span class="courseButtonWord">进入</span>
 8                     <span class="glyphicon glyphicon-log-in courseButtonIcon"></span>
 9                 </button>
10             </div>
11 
12             <div class="course">
13                 <div class="courseImg"><img src="YYFramework/Public/02.jpg" alt="课程图片"></div>
14                 <div class="courseName">计算机</div>
15                 <button type="button" class="btn btn-primary courseButton">
16                     <span class="courseButtonWord">进入</span>
17                     <span class="glyphicon glyphicon-log-in courseButtonIcon"></span>
18                 </button>
19             </div>
20 
21             <div class="course">
22                 <div class="courseImg"><img src="YYFramework/Public/02.jpg" alt="课程图片"></div>
23                 <div class="courseName">计算机</div>
24                 <button type="button" class="btn btn-primary courseButton">
25                     <span class="courseButtonWord">进入</span>
26                     <span class="glyphicon glyphicon-log-in courseButtonIcon"></span>
27                 </button>
28             </div>
29 
30             <div class="course">
31                 <div class="courseImg"><img src="YYFramework/Public/03.png" alt="课程图片"></div>
32                 <div class="courseName">计算机</div>
33                 <button type="button" class="btn btn-primary courseButton">
34                     <span class="courseButtonWord">进入</span>
35                     <span class="glyphicon glyphicon-log-in courseButtonIcon"></span>
36                 </button>
37             </div>
38 
39             <div class="course">
40                 <div class="courseImg"><img src="YYFramework/Public/04.png" alt="课程图片"></div>
41                 <div class="courseName">计算机</div>
42                 <button type="button" class="btn btn-primary courseButton">
43                     <span class="courseButtonWord">进入</span>
44                     <span class="glyphicon glyphicon-log-in courseButtonIcon"></span>
45                 </button>
46             </div>
47 
48             <div class="course">
49                 <div class="courseImg"><img src="YYFramework/Public/05.png" alt="课程图片"></div>
50                 <div class="courseName">计算机</div>
51                 <button type="button" class="btn btn-primary courseButton">
52                     <span class="courseButtonWord">进入</span>
53                     <span class="glyphicon glyphicon-log-in courseButtonIcon"></span>
54                 </button>
55             </div>
56 
57             <div class="course">
58                 <div class="courseImg"><img src="YYFramework/Public/06.jpg" alt="课程图片"></div>
59                 <div class="courseName">计算机</div>
60                 <button type="button" class="btn btn-primary courseButton">
61                     <span class="courseButtonWord">进入</span>
62                     <span class="glyphicon glyphicon-log-in courseButtonIcon"></span>
63                 </button>
64             </div>
65 
66             <div class="course">
67                 <div class="courseImg"><img src="YYFramework/Public/07.jpg" alt="课程图片"></div>
68                 <div class="courseName">计算机</div>
69                 <button type="button" class="btn btn-primary courseButton">
70                     <span class="courseButtonWord">进入</span>
71                     <span class="glyphicon glyphicon-log-in courseButtonIcon"></span>
72                 </button>
73             </div>
74 
75 
76             <div class="clearLeft"></div>
77         </div>

css:

 1     /****内容区域*****/
 2     .content {
 3          100%;
 4         border: 1px solid black;
 5         padding: 50px 100px;
 6     }
 7 
 8     .course {
 9          265px;
10         height: 330px;
11         /*border: 1px solid red;*/
12 
13         margin-right: 60px;
14         /*margin-bottom: 60px;*/
15         margin-top: 50px;
16         float: left;
17 
18         box-shadow: 0px 0px 3px 3px  #888888;
19     }
20 
21     .courseImg {
22          265px;
23         height: 235px;
24     }
25 
26     .courseImg img {
27          265px;
28         height: 235px;
29     }
30 
31     .courseName {
32          100%;
33         height: 45px;
34         /*border: 1px solid red;*/
35         text-align: center;
36         color: #000;
37         font-size: 16px;
38         font-weight: 500;
39         line-height: 45px;
40 
41     }
42 
43     .courseButton {
44         /*margin: 0px auto;*/
45          100px;
46         margin-left: 82px;
47 
48 
49     }
50 
51     .courseButtonWord {
52         display: inline-block;
53          50px;
54         font-size: 16px;
55         color: #FFF;
56         text-align: center;
57         /*border: 1px solid red;*/
58         /*border-right: 1px solid #347FBF;*/
59         border-right: 1px solid #3984C3;
60     }
61 
62     .courseButtonIcon {
63         color: #FFF;
64     }
65 
66     .clearLeft {
67         clear: left;
68     }

相关阅读:
2.vue插件总结——总有你能用上的插件
 1.前端数据可视化插件:Highcharts、Echarts和D3（区别）
git学习地址
 node vue 微信公众号（四）配置环境本地测试
 解决element 分页组件，搜索过后current-page 绑定的数据变了，但是页面当前页码并没有变的问题
 导入excel并进行数据提取
 后端返回字符串中带换行符，前端需转换
 正则表达式tab表示
 FormData
interval
原文地址：https://www.cnblogs.com/cbza/p/6946322.html