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

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

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

html:

 <div class="content">

             <div class="course">
                 <div class="courseImg"><img src="YYFramework/Public/01.png" alt="课程图片"></div>
                 <div class="courseName">计算机</div>
                 <button type="button" class="btn btn-primary courseButton">
                     <span class="courseButtonWord">进入</span>
                     <span class="glyphicon glyphicon-log-in courseButtonIcon"></span>
                 </button>
             </div>

             <div class="course">
                 <div class="courseImg"><img src="YYFramework/Public/02.jpg" alt="课程图片"></div>
                 <div class="courseName">计算机</div>
                 <button type="button" class="btn btn-primary courseButton">
                     <span class="courseButtonWord">进入</span>
                     <span class="glyphicon glyphicon-log-in courseButtonIcon"></span>
                 </button>
             </div>

             <div class="course">
                 <div class="courseImg"><img src="YYFramework/Public/02.jpg" alt="课程图片"></div>
                 <div class="courseName">计算机</div>
                 <button type="button" class="btn btn-primary courseButton">
                     <span class="courseButtonWord">进入</span>
                     <span class="glyphicon glyphicon-log-in courseButtonIcon"></span>
                 </button>
             </div>

             <div class="course">
                 <div class="courseImg"><img src="YYFramework/Public/03.png" alt="课程图片"></div>
                 <div class="courseName">计算机</div>
                 <button type="button" class="btn btn-primary courseButton">
                     <span class="courseButtonWord">进入</span>
                     <span class="glyphicon glyphicon-log-in courseButtonIcon"></span>
                 </button>
             </div>

             <div class="course">
                 <div class="courseImg"><img src="YYFramework/Public/04.png" alt="课程图片"></div>
                 <div class="courseName">计算机</div>
                 <button type="button" class="btn btn-primary courseButton">
                     <span class="courseButtonWord">进入</span>
                     <span class="glyphicon glyphicon-log-in courseButtonIcon"></span>
                 </button>
             </div>

             <div class="course">
                 <div class="courseImg"><img src="YYFramework/Public/05.png" alt="课程图片"></div>
                 <div class="courseName">计算机</div>
                 <button type="button" class="btn btn-primary courseButton">
                     <span class="courseButtonWord">进入</span>
                     <span class="glyphicon glyphicon-log-in courseButtonIcon"></span>
                 </button>
             </div>

             <div class="course">
                 <div class="courseImg"><img src="YYFramework/Public/06.jpg" alt="课程图片"></div>
                 <div class="courseName">计算机</div>
                 <button type="button" class="btn btn-primary courseButton">
                     <span class="courseButtonWord">进入</span>
                     <span class="glyphicon glyphicon-log-in courseButtonIcon"></span>
                 </button>
             </div>

             <div class="course">
                 <div class="courseImg"><img src="YYFramework/Public/07.jpg" alt="课程图片"></div>
                 <div class="courseName">计算机</div>
                 <button type="button" class="btn btn-primary courseButton">
                     <span class="courseButtonWord">进入</span>
                     <span class="glyphicon glyphicon-log-in courseButtonIcon"></span>
                 </button>
             </div>

             <div class="clearLeft"></div>
         </div>

css:

     /****内容区域*****/
     .content {
         width: 100%;
         border: 1px solid black;
         padding: 50px 100px;
     }

     .course {
         width: 265px;
         height: 330px;
         /*border: 1px solid red;*/

         margin-right: 60px;
         /*margin-bottom: 60px;*/
         margin-top: 50px;
         float: left;

         box-shadow: 0px 0px 3px 3px  #888888;
     }

     .courseImg {
22         width: 265px;
23         height: 235px;
     }

     .courseImg img {
27         width: 265px;
28         height: 235px;
     }

     .courseName {
         width: 100%;
         height: 45px;
         /*border: 1px solid red;*/
         text-align: center;
         color: #000;
         font-size: 16px;
         font-weight: 500;
         line-height: 45px;

     }

     .courseButton {
         /*margin: 0px auto;*/
         width: 100px;
         margin-left: 82px;

     }

     .courseButtonWord {
         display: inline-block;
         width: 50px;
         font-size: 16px;
         color: #FFF;
         text-align: center;
         /*border: 1px solid red;*/
         /*border-right: 1px solid #347FBF;*/
         border-right: 1px solid #3984C3;
     }

     .courseButtonIcon {
         color: #FFF;
     }

     .clearLeft {
         clear: left;
     }