10 Replies - 2259 Views - Last Post: 05 October 2011 - 08:50 PM

#1 Repatilian  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 24-September 11

Image height resize to screen size.

Posted 24 September 2011 - 10:52 AM

Hi, i have an image on my website i want to resize to any screen size. It resizes it's width but i want it to resize it's height too. The image is logospining.gif. The image dimensions are 1950x1200. basically it's transparent except the actual graphic. Can anyone look at my code and tell me what i need to do? The website is www.creationindex.com. Thank you.
Is This A Good Question/Topic? 0
  • +

Replies To: Image height resize to screen size.

#2 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 943
  • View blog
  • Posts: 2,353
  • Joined: 15-February 11

Re: Image height resize to screen size.

Posted 24 September 2011 - 11:18 AM

Use percentage instead of actual pixels. height: 100% should do.
Was This Post Helpful? 0
  • +
  • -

#3 Repatilian  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 24-September 11

Re: Image height resize to screen size.

Posted 24 September 2011 - 11:58 AM

i tried adding height: 100%; everywhere and can't get it to work.
Was This Post Helpful? 0
  • +
  • -

#4 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Image height resize to screen size.

Posted 24 September 2011 - 12:40 PM

You have to use percentages just as codeprada said. Make sure you also have this:

html, body {
    height: 100%;
}


I've had to use that a lot to fix certain things.
Was This Post Helpful? 0
  • +
  • -

#5 Repatilian  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 24-September 11

Re: Image height resize to screen size.

Posted 24 September 2011 - 04:18 PM

i got the height attribute in there. I still can't get the image animation to start in the middle of the screen.
Was This Post Helpful? 0
  • +
  • -

#6 Slice  Icon User is offline

  • sudo pacman -S moneyz


Reputation: 239
  • View blog
  • Posts: 693
  • Joined: 24-November 08

Re: Image height resize to screen size.

Posted 25 September 2011 - 04:34 PM

What are you applying the height attribute to? Your image? Or a div containing the image? Or is the image a background-images on your body tag?
Was This Post Helpful? 0
  • +
  • -

#7 Repatilian  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 24-September 11

Re: Image height resize to screen size.

Posted 26 September 2011 - 11:16 AM

Well, it's an image in css but it's in a div in the html. It's not a background image. Here's my code. It's logospining.gif.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.creationindex.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Creation Index</title>

<script type="text/javascript">

   var preloads=[];
function preload(){
for(var c=0;c< arguments.length;c++) {
   preloads[preloads.length]=new Image();
   preloads[preloads.length-1].src=arguments[c];
  }
 }
preload('logospining.gif','backgroundgreen.gif','lineback.gif','lettering.gif','alien.gif','equalizer.gif');

function init(){

/* this value is 4 seconds, which is the time that logospintest.gif takes to run it's course */

   var delay=4950;

/*********************************************************************************************/

   setTimeout(
   function(){
   document.getElementById('backgroundgreen').className='';
   document.getElementById('lineback').className='';
   document.getElementById('lettering').className='';
   document.getElementById('alien').className='';
   document.getElementById('equalizer').className='';	
   },delay 
   );
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
</script>

<style type="text/css">
html,body {
    height:100%;
    margin:0;
    background-color:#000;
 }
#images {
    position:relative;
    height:100%;       /* reduce this value to suit your requirements */
    overflow:hidden;
 }
#images img {
    width:100%;  
 }
#images #lettering,#images #lettering1 {
    width:80%; /*  adjust this value to suit your requirements  */
    left:10%;  /*  this value=(100%-width value)/2  */
 }
#images #alien,#images #alien1 {
    width:12.8%; /*  adjust this value to suit your requirements  */
    left:50%;  /*  this value=(100%-width value)/2  */
 }
#images #equalizer,#images #equalizer1 {
    width:60%; /*  adjust this value to suit your requirements  */
    left:20%;  /*  this value=(100%-width value)/2  */
 }
#images img {
    position: absolute;
    top: 0;
    left: 0;    
}
.hide {
    display:none; 
}
</style>

</head>
<body>

<div id="images">
 <img id="backgroundgreen" class="hide" src="backgroundgreen.gif" alt=""> 
 <img src="logospining.gif" alt="">
 <img id="lineback" class="hide" src="lineback.gif" alt=""> 
 <img id="lettering" class="hide" src="lettering.gif" alt="">
 <img id="alien" class="hide" src="alien.gif" alt="">
 <img id="equalizer" class="hide" src="equalizer.gif" alt="">

<noscript>
<div>
 <img id="backgroundgreen1" src="backgroundgreen.gif" alt=""> 
 <img id="lineback1" src="lineback.gif" alt=""> 
 <img id="lettering1" src="lettering.gif" alt=""> 
 <img id="alien1" src="alien.gif" alt="">
 <img id="equalizer1" src="equalizer.gif" alt="">
</div>
</noscript>

</div>
 
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#8 Repatilian  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 24-September 11

Re: Image height resize to screen size.

Posted 26 September 2011 - 11:44 AM

I think what i need to do is use jquery and put the images in css under contentwrp. That way every image scales together.
Was This Post Helpful? 0
  • +
  • -

#9 Hqtitan  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 51
  • Joined: 28-August 10

Re: Image height resize to screen size.

Posted 26 September 2011 - 01:37 PM

If you're trying to get all of those images in that div to resize to 100% height and width: I would give them a class, and use that class to apply the height and width to the images themselves rather than the containing div.
Was This Post Helpful? 0
  • +
  • -

#10 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 216
  • View blog
  • Posts: 1,602
  • Joined: 20-January 09

Re: Image height resize to screen size.

Posted 26 September 2011 - 05:06 PM

Check out this demo (make sure to resize your browser to see the effect): http://filamentgroup...ponsive-images/

The how to can be found here: http://filamentgroup...e_image_sizing/

Basically it uses JS and some htaccess settings to have the image resize automatically and maintain aspect ration. The file call is only 1KB.

--

Greg
Was This Post Helpful? 1
  • +
  • -

#11 Repatilian  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 24-September 11

Re: Image height resize to screen size.

Posted 05 October 2011 - 08:50 PM

I got it fixed
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1