CODEWITHSUNDEEP
html
Jorge181
Jorge181

Reputation: 307

HTML Show picture that fits screen

I have the followin code, that shows a picture:

<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>

And I want to make that the picture fits the screen, and I have tried to put width="100%" in the img, in the a href... but it is always the same size.

How can I make it?

Upvotes: 1

Views: 92

Answers (3)

saj1991
saj1991

Reputation: 19

as per docs u can try by adding background-cover to fit image on screen

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

Upvotes: 0

gkalpak
gkalpak

Reputation: 48211

What you can do is place the image as background to an element and make the element cover the whole screen. (And you don't need any JS for that, only HTML and CSS.)
Example:

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%;
}

Live demo here.

(Also, note that if you don't need the link-functionality, you can replace the <a> element with a <div>.)

Upvotes: 0

Mohit Bhansali
Mohit Bhansali

Reputation: 1785

You can use backstretch jquery. Backstretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page. The image will stretch to fit the page, and will automatically resize as the window size changes.

Here is an example:

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

Upvotes: 2

Related Questions