Welcome, Old Sport!

修改图片大小的CSS技巧

by ilikecss ON 2012/12/25 7242

修改图片大小的CSS技巧只需要几行简单的CSS就可以让你网站的图片调整到你需要的大小,而不是费力的打开图片软件去修改大小。其原理主要是利用边距然后隐藏其变化的部分内容。类似文章图片封面就可以使用此类技巧。

下面一起来看代码:

<p class="fix_img">
<img src="img/img1.jpg">
</p>
p.fix_img {
	margin:0 15px 10px 0;
	float:left;
	display:inline;
	box-shadow:1px 1px 2px #AAAAAA;
	overflow:hidden;
}
p.fix_img img {
	margin:0 -100px -45px -100px;
}
13条评论
  1. #1

    axiu说道:

    overflow:hidden的用处确实很大

  2. 一劳永逸,代码已收。 :smile:

  3. #3

    Marvin说道:

    啊,好久不来了。这个好好学习一下。我更喜欢你的技术类的文章啊~

  4. #4

    哼哼猪说道:

    这个很方便啊,不过这样至少遮盖,貌似原图太大的话会影响首页加载

  5. #5

    pcb抄板说道:

    新手路过,嘿嘿……

  6. #6

    ifonder说道:

    挺好的小代码段,喜欢

  7. #7

    Q_Queenia说道:

    好久没上来学习了
    :smile: :smile:




TOP