零分杂记

网页插入图片代码：

<img src=“//img.32xp.com/photo_20150608230123.jpg”>

这种，显然不适合网页的布局，需要对图片进行缩放，一种是直接设置图片大小，一种是在外添加一个层控制超出隐藏

直接设置图片大小，以200X200为例：

<img src=“//img.32xp.com/photo_20150608230123.jpg” width=“200” height=“200” title=“缩放200X200”>

效果：

可以达到图片的缩放，只是，图片严重变形了！那就在外面添加一个DIV层超出隐藏看看效果！

<div style=“width:200px;height:200px;overflow:hidden;margin:20px;”>
<img src=“//img.32xp.com/photo_20150608230123.jpg” title=“超出隐藏”>
</div>

效果：

效果也并不满意，图片太大的话，图片明显只是显示了一个小小的部分，显示不出图片的内容，那就在给图片加一个缩放，为了更好的体现效果，给外层加一个边框！

<div style=“width:200px;height:200px;overflow:hidden;margin:20px;border:1px solid #ff0000;”>
<img src=“//img.32xp.com/photo_20150622134552.png” tyle=“width:200px;height:auto;” title=“缩放200X200,超出显示”>
</div>

效果：

这样看好像是不错了，不过，这个是高>宽的显示，如果是宽>高的话，效果似乎又不大满意了！如图：

还要一个判断，判断图片是的宽高，再对图片是设定高还是设定宽，要判断图片宽高首先就是获取图片的宽高，PHP为例，用getimagesize函数！看下获取的内容

$imgarr=getimagesize(“//img.32xp.com/photo_20150608230123.jpg”); print_r($imgarr);

得到的数组：

可以得到图片的宽高，还有其他的一些参数，这里只要宽高就可以了！

给图片加上一个判断：

<div style=“width:200px;height:200px;overflow:hidden;margin:20px;border:1px solid #ff0000;”>
<img src=“//img.32xp.com/photo_20150608230123.jpg” <?php $imgarr=getimagesize(“//img.32xp.com/photo_20150608230123.jpg”); if($imgarr[0]>$imgarr[1]){echo ‘style=“height:200px;width:auto;”‘;}else{{echo ‘style=“width:200px;height:auto;”‘;}} ?>  title=“缩放200X200,超出隐藏”>
</div>
<div style=“width:200px;height:200px;overflow:hidden;margin:20px;border:1px solid #ff0000;”>
<img src=“//img.32xp.com/photo_20150622134552.png” <?php $imgarr=getimagesize(“//img.32xp.com/photo_20150622134552.png”); if($imgarr[0]>$imgarr[1]){echo ‘style=“height:200px;width:auto;”‘;}else{{echo ‘style=“width:200px;height:auto;”‘;}} ?>  title=“缩放200X200,超出隐藏”>
</div>

效果：

这样看起来，不论是图片宽>高还是高>宽，都可以充满整个DIV层！如果还不满意，接下来就控制图片左右上下居中，对超出的部分进行隐藏，用margin-left和margin-height；

<div style=“width:200px;height:200px;overflow:hidden;margin:20px;border:1px solid #ff0000;”>
<img src=“//img.32xp.com/photo_20150608230123.jpg” <?php $imgarr=getimagesize(“//img.32xp.com/photo_20150608230123.jpg”); if($imgarr[0]>$imgarr[1]){$imgbig=round($imgarr[0]*200/$imgarr[1]); echo ‘style=“height:200px;width:auto;margin-left:-‘.round(($imgbig-200)/2).'”‘;}else{$imgbig=round($imgarr[1]*200/$imgarr[0]);echo ‘style=“width:200px;height:auto;margin-top:-‘.round(($imgbig-200)/2).'”‘;} ?>  title=“缩放200X200,超出隐藏”>
</div>
<div style=“width:200px;height:200px;overflow:hidden;margin:20px;border:1px solid #ff0000;”>
<img src=“//img.32xp.com/photo_20150622134552.png” <?php $imgarr=getimagesize(“//img.32xp.com/photo_20150622134552.png”); if($imgarr[0]>$imgarr[1]){$imgbig=round($imgarr[0]*200/$imgarr[1]); echo ‘style=“height:200px;width:auto;margin-left:-‘.round(($imgbig-200)/2).'”‘;}else{$imgbig=round($imgarr[1]*200/$imgarr[0]);echo ‘style=“width:200px;height:auto;margin-top:-‘.round(($imgbig-200)/2).'”‘;} ?>  title=“缩放200X200,超出隐藏”>
</div>

这样就实现了图片居中超出左右/上下超出的隐藏了！

附：淘宝详情页主图缩放左右/上下居中的代码

<div style=“width:200px;height:200px;overflow:hidden;margin:20px;border:1px solid #ff0000;”>
<img src=“//img.32xp.com/photo_20150608230123.jpg” <?php $imgarr=getimagesize(“//img.32xp.com/photo_20150608230123.jpg”); if($imgarr[0]>$imgarr[1]){$imgbig=round($imgarr[1]*200/$imgarr[0]); echo ‘style=“width:200px;height:auto;margin-top:’.round((200-$imgbig)/2).'”‘;}else{$imgbig=round($imgarr[0]*200/$imgarr[1]);echo ‘style=“height:200px;width:auto;margin-left:’.round((200-$imgbig)/2).'”‘;} ?>  title=“缩放200X200,超出隐藏”>
</div>
<div style=“width:200px;height:200px;overflow:hidden;margin:20px;border:1px solid #ff0000;”>
<img src=“//img.32xp.com/photo_20150622134552.png” <?php $imgarr=getimagesize(“//img.32xp.com/photo_20150622134552.png”); if($imgarr[0]>$imgarr[1]){$imgbig=round($imgarr[1]*200/$imgarr[0]); echo ‘style=“width:200px;height:auto;margin-top:’.round((200-$imgbig)/2).'”‘;}else{$imgbig=round($imgarr[0]*200/$imgarr[1]);echo ‘style=“height:200px;width:auto;margin-left:’.round((200-$imgbig)/2).'”‘;} ?>  title=“缩放200X200,超出隐藏”>
</div>

效果：