cnblogs/dcrenl/网页图片垂直剧中 等比例缩放 黑白显示(1).html

<div id="sina_keyword_ad_area2" class="articalContent   ">
<p>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"&gt;<br />
&lt;html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"&gt;<br />
&lt;head&gt;<br />
&lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8" /&gt;<br />
&lt;title&gt;无标题文档&lt;/title&gt;<br />
&lt;/script&gt;<br />
&lt;style type="text/css"&gt;<br />
&lt;!--<br />
body {<br />
&nbsp;margin-left: 0px;<br />
&nbsp;margin-top: 0px;<br />
&nbsp;margin-right: 0px;<br />
&nbsp;margin-bottom: 0px;<br />
}</p>
<p><br />
img<br />
{<br />
&nbsp;<br />
&nbsp;width: expression_r(this.width &gt; 200&amp;&amp; this.width &gt;this.height ? 200 : true);<br />
&nbsp;height: expression_r(this.height &gt;160 ? 200 : true);<br />
&nbsp;<br />
&nbsp;max-width:200px;max-height:160px;<br />
&nbsp;min-width:0px;min-height:0px;<br />
&nbsp;<br />
&nbsp;position:static;<br />
&nbsp;+position:relative;<br />
&nbsp;top:-50%;left:-50%;<br />
filter: Gray;<br />
}<br />
<br />
div<br />
{<br />
&nbsp;width:500px;<br />
&nbsp;height:360px;<br />
&nbsp;background:#000;<br />
&nbsp;overflow:hidden;<br />
&nbsp;position:relative;<br />
&nbsp;display:table-cell;<br />
&nbsp;text-align:center;<br />
&nbsp;vertical-align:middle;</p>
<p>}<br />
<br />
p<br />
{<br />
&nbsp;<br />
&nbsp; position:static;<br />
&nbsp; +position:absolute;<br />
&nbsp; top:50%;<br />
&nbsp; background-color:#0F0;<br />
}<br />
--&gt;<br />
&lt;/style&gt;&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;div&gt;&lt;p&gt;&lt;ahref="#"&gt;&lt;imgsrc="Chrysanthemum.jpg"/&gt;&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br />
</p>

</div>
<p>&nbsp;</p>