怎么用css将文章缩略图 图片大小限制在固定尺寸内 在不裁切不变形的条件下

html-css019

怎么用css将文章缩略图 图片大小限制在固定尺寸内 在不裁切不变形的条件下,第1张

/*只固定一个尺寸，width或height 都可以，大小的话自己合适就行。*/

<img style="width:300px" src="aa.jpg" />

楼下说的那个不怎么对.

他把大小都固定了

.img1{ width:100pxheight:50px

应该使用百分比来 在你显示图片的地方设置一个大小 比如1000px X 1000PX 那么你打开的图片不会超过1000px 那么你按照百分比95% 高宽都一样 , 这样你的图片就不会现实的时候变形 因为你的图片不肯能全部都是正方形的吧

代码：

<?php

$szPostContent = $post->post_content

$szSearchPattern = '~<img [^\>]*\ />~'// 搜索所有符合的图片

preg_match_all( $szSearchPattern, $szPostContent, $aPics )

$iNumberOfPics = count($aPics[0])// 检查一下至少有一张图片

?>

<?php if ( $iNumberOfPics >0 ) { ?><?php echo '<span class="miniature" >'.$aPics[0][0].'</span>'?><?php } ?>

以上结束，然后需要在style.css中添加miniature的样式，图片尺寸，width(宽)，height（高）大小自己修改。

如：

.miniature img{width:140pxheight:160pxfloat:leftmargin-right:5pxoverflow:hiddentext-align:centerline-height:22pxpadding:2pxborder:1px solid #ccc}

以此类推，不同地方换不同的class样式就行了。