码迷,mamicode.com
首页 > Web开发 > 详细

css “裁剪”图片(显示图片的一部分)

时间:2015-05-20 23:55:59      阅读:481      评论:0      收藏:0      [点我收藏+]

标签:

背景:朋友有一个需求,就是列表页显示的图片要做裁剪,不然不按比例缩小图片看起来就变形了。本来想好的解决办法是用PHP来生成缩略图,然而试了好几个开源缩略图类都没有一个满意的,突然想到为什么不直接用CSS呢?

<style>
    #sample{
        width:100px;
        height:100px;
        overflow:hidden;
        position: relative;
        border: 1px solid black;
    }
</style>
<div id="sample">
    <img src="150113-4.jpg" height="100px"/> 
</div>

比如你有一张图片是400x300像素的,然后你的列表页要显示的宽高是100x100像素,这时候怎么办呢?

1. 先按比例缩小图片,即设置img标签的height="100px" ;

2. 裁剪, 设置包围img标签的div的宽高为100x100

3. done !!!

css “裁剪”图片(显示图片的一部分)

标签:

原文地址:http://www.cnblogs.com/bushe/p/4518446.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!