Question

我有以下代码，显示图片：

<html>
<head>
<style>* {margin:0;padding:0;}</style>
</head>
<body style="margin: 0; padding: 0">
<center>
<script type='text/javascript'><!--//<![CDATA[
   var m3_u = (location.protocol=='https:'?'URL1':'URL2');
   var m3_r = Math.floor(Math.random()*99999999999);
   if (!document.MAX_used) document.MAX_used = ',';
   document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
   document.write ("?zoneid=1");
   document.write ('&amp;cb=' + m3_r);
   if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used);
   document.write (document.charset ? '&amp;charset='+document.charset : (document.characterSet ? '&amp;charset='+document.characterSet : ''));
   document.write ("&amp;loc=" + escape(window.location));
   if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer));
   if (document.context) document.write ("&context=" + escape(document.context));
   if (document.mmm_fo) document.write ("&amp;mmm_fo=1");
   document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript><a href='URL3' target='_blank'><img src='URL4' border='0' alt=''/></a></noscript>
</center>
</body>
</html>

我想让图片适合屏幕，我试图将宽度=“100％”放在img中，在一个href ...但它总是相同的大小。

我该怎么做？

Answer 1

您可以使用backstretch jquery。 Backstretch是一个jQuery插件，允许您将动态调整大小的背景图像添加到任何页面。图像将拉伸以适合页面，并随着窗口大小的变化自动调整大小。

以下是一个例子：

http://srobbin.com/jquery-plugins/backstretch/

Answer 2

您可以做的是将图像作为背景放置到元素上，并使元素覆盖整个屏幕。（而且你不需要任何JS，只有HTML和CSS。）
例如：

HTML

<a id="imgA" href='http://www.stackoverflow.com' target='_blank' /a>

CSS

#imgA {
    background-image: url(<url_to_img>);

    /* Make the image cover the whole element area */
    background-size: 100%;

    /* Make the element occupy the whole window */
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

现场演示here。

（另请注意，如果您不需要链接功能，则可以使用<a>替换<div>元素。）

Answer 3

根据文档，您可以尝试添加背景封面以适应屏幕上的图像

#img
{
background:url(img.jpg);
background-size:cover;
}

HTML显示适合屏幕的图片

3 个答案: