cnblogs/dcrenl/网页图片垂直剧中 等比例缩放 黑白显示.html
2024-09-24 12:43:01 +08:00

3 lines
1.7 KiB
HTML

<p>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"&gt;<br />&lt;html xmlns="<a href="http://www.w3.org/1999/xhtml">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;&nbsp;position:static;<br />&nbsp;&nbsp;+position:absolute;<br />&nbsp;&nbsp;top:50%;<br />&nbsp;&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;a href="#"&gt;&lt;img src="Chrysanthemum.jpg"/&gt;&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</p>