定尺寸显示头像

刺骨的言语ヽ痛彻心扉 2022-03-27 09:12 184阅读 0赞

在网页上有一个方框用来显示头像，当头像大小正好的时候没有问题，可是当头像尺寸与输入框不一样的时候，尤其是头像不是方的时候，就会有很大的问题。

以下是代码和效果：

<table style="border-collapse:collapse;"> 
 <tbody> 
 <tr> 
 <td style="border-top:solid .5pt;border-left:solid .5pt;border-bottom:solid .5pt;border-right:solid .5pt;">&lt;html&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; &nbsp; #container { height:50px; width:50px; border:solid 1px black; overflow:hidden; } &nbsp; &lt;/style&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="container"&gt; &lt;img alt="" src="touxiang2.jpg" /&gt; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt; &lt;/html&gt;</td> 
 </tr> 
 </tbody> 
</table>

![201203201104473499.png][]

原图片如下：

![201203201105023276.png][]

可以看到，只显示了一半。

当然，还有另一种方案，就是设置图片的大小，但是这样图片就会变形。

由于大部分头像都是高度大于宽度，如何让图片按照宽度自适应，高度上多出的部分切掉那？

以下是实现的代码和效果。

<table style="border-collapse:collapse;"> 
 <tbody> 
 <tr> 
 <td style="border-top:solid .5pt;border-left:solid .5pt;border-bottom:solid .5pt;border-right:solid .5pt;">&lt;html&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; &nbsp; #container { height:50px; width:50px; border:solid 1px black; overflow:hidden; } &nbsp; #container img { width:100%; } &nbsp; &lt;/style&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="container"&gt; &lt;img alt="" src="touxiang2.jpg" /&gt; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

![201203201105045586.png][]

换一张图片试试。

原图片：

![201203201105181625.png][]

网页上的效果：

![201203201105194492.png][]

当然，如果要显示的图片宽度大于高度，并且想让图片按照高度自适应的话，只要将height设置成100%就可以了。不过这种情况很少见。

[201203201104473499.png]: /images/20220327/db4d373d682044439917a7f10d821e24.png
[201203201105023276.png]: /images/20220327/315020da82e94e48b1a248399378c23b.png
[201203201105045586.png]: /images/20220327/94b65d40037840f78069335642ca72c6.png
[201203201105181625.png]: /images/20220327/0130ce11ccb2463cbc95ce7c62f8295c.png
[201203201105194492.png]: /images/20220327/4512e8e40f284d4ca35fcf3d38f12f18.png