html代码

<div class="articleItem">
      <div class="pic">
           <a href="single.html"><img src="images/newspic.jpg" alt=" "></a>
      </div>
      <div class="content">      
           <h4><a href="single.html">湖州市长冒酷暑莅临指导，意力管业发展热情高涨</a></h4>                
      </div>
     <div class="meta"><span class="date">2019/6/29</span><span class="linkto"><a href="single.html"> →</a></span></div>
</div>

css代码

.articleItem{  position:relative; height:calc(100% - 10px); padding-bottom:60px; margin:30px auto 0;border:1px solid #e0e0e0; padding-bottom:20px }
.articleItem .pic{ position:relative; padding-top:calc(232/380 * 100%); overflow:hidden;background:#0b3893;}
.articleItem .pic img{ position:absolute; top:0; left:0;}
.articleItem .pic:hover img{ transform:scale(1.1,1.1); opacity:0.8}
.articleItem .content{ padding:10px 0;color:#555; margin:0 15px;}
.articleItem .content h4{ font-size:18px; line-height:1.5 }
.articleItem .meta{margin:0 15px;}
.articleItem .meta .date{ padding-top:10px; color:#999; display:inline-block;}
.articleItem .linkto{  font-size:16px; float:right;}
.articleItem .linkto a{color:#ccc; display:block; width:36px; height:36px; text-align:center; line-height:36px; border:1px solid #ccc;}
.articleItem .linkto a:hover{ color:#0b3893; border:1px solid #0b3893;  text-decoration:none;}
.articleItem:hover{ box-shadow:3px 3px 7px #ccc;}

图片适应宽高 padding-top 和 position 两个属性配合使用真的好用，图片放大效果用transform:scale()