weird problem with images

**jundo12** · 05-26-2015, 01:54 AM

the images i'm working with refuse to be responsive. no matter what i do. i thought it was odd, so i checked why the image in my browser window was so much bigger than it actually is, by like 5 times. it wasn't the zoom feature in the browser. so that wasn't it. i had the images set in the css of the html page so all images will display at 100% of their width based on the size of the screen (supposedly a full proof method to keep images responsive). but it's not resizing on browser resize. in fact, it stays like 5 times its original size, regardless of screen size. so i tried resizing them in graphics program, but it effected the quality somewhat, which i thought was defeating the purpose. even BEFORE i added the image display 100% thing, i had the exact same problem with these images. they are just normal .pngs with transparent backgrounds. the only thing that worked was to add width % in the image tag, but then that defeats this (and they still don't resize)

img {max-width:100%;
max-height: 100%;
}

any reason for this image issue? i had them in a carousel that seemed to resize them correctly, but just being in a normal show/hide tab thing is screwing the resize up badly. i tried 2 different carousels, one resized them correctly, the other refused to resize them correctly)

here's the whole page

Code:

<!DOCTYPE html>
<html>
<head><title></title>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<style>div#tabs p{display:none;}

div#tabs p.tab1:target {display:block;}
div#tabs p.tab2:target {display:block;}
div#tabs p.tab3:target {display:block;}
div#tabs p.tab4:target {display:block;}
div#tabs p.tab5:target {display:block;}
div#tabs p.tab6:target {display:block;}
div#tabs p.tab7:target {display:block;}
div#tabs p.tab8:target {display:block;}
div#tabs p.tab9:target {display:block;}
div#tabs p.tab10:target {display:block;}




</style>

<style> 
   body { background-color:#000C3A;

background-image: url("screen.png");  
background-size: 100%;
background-repeat: no-repeat;


}

img {max-width:100%;
max-height: 100%;
}

a {
color: #93A9FF;
}

a {
   outline: 0;
}

 a:link {
text-decoration: none;
border:0px;  
border-style: solid;
border-color: #93A9FF;
padding: 2px;

}

img { border-style: none; }

p {
    font-family: "Lucida Console", Monaco, monospace;
} 

div {
    font-weight:lighter;
}








</style>

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script src="imageswapaudio.js">

/***********************************************
* Image Swap and HTML5 audio effect (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>







</head>



<body>

<div style="position: absolute; left: 9.2%; top: 87%;">
<h2 class="nav-tab-wrapper">

    <a href="#tab1" class="nav-tab tab1" data-sounddown="click.mp3" ><font size=2.1em>Mercury Female</a>

<a href="#tab2" class="nav-tab nav-tab-active tab2" data-sounddown="click.mp3">Mercury Male</a>

	<a href="#tab3" class="nav-tab tab3" data-sounddown="click.mp3">Venus Female</a>

<a href="#tab4" class="nav-tab tab4" data-sounddown="click.mp3" >Venus Male</a>

<a href="#tab5" class="nav-tab tab5" data-sounddown="click.mp3">Earth Female</a>

<a href="#tab6" class="nav-tab tab6" data-sounddown="click.mp3">Earth Male</a>

<a href="#tab7" class="nav-tab tab7" data-sounddown="click.mp3">Saturn Female</a>

<a href="#tab8" class="nav-tab tab8" data-sounddown="click.mp3">Saturn Male</a>

<a href="#tab9" class="nav-tab tab9" data-sounddown="click.mp3" >Neptune Female</a>

<a href="#tab10" class="nav-tab tab10" data-sounddown="click.mp3" >Neptune Male</a>

  </h2>
</div>

<div style="position: absolute; left: 41.8%; top: 8%;">

<div id='tabs'>



  <p id='tab1' class='tab1'><a href="" ><img src="1a.png" width="66%"  data-srcover="1back2.png" data-sounddown="click.mp3"></a> 


  <p id='tab2' class='tab2'><a href="" ><img src="2a.png" data-srcover="2back.png" data-sounddown="click.mp3" width="66%" ></a>
  <p id='tab3' class='tab3'><a href=""><img src="3a.png" data-srcover="3back.png" width="54%" data-sounddown="click.mp3" ></a>
<p id='tab4' class='tab4'><a href=""><img src="4a.png" data-srcover="4back.png"  width="53%"data-sounddown="click.mp3" ></a>
<p id='tab5' class='tab5'><a href=""><img src="6a.png" data-srcover="6back.png" width="50%" data-sounddown="click.mp3" ></a>
<p id='tab6' class='tab6'><a href=""><img src="5a.png" data-srcover="5back.png" width="50%" data-sounddown="click.mp3"  ></a>
<p id='tab7' class='tab7'><a href=""><img src="16.png" data-srcover="16back.png" width="83%" data-sounddown="click.mp3"  ></a>
<p id='tab8' class='tab8'><a href=""><img src="15.png" data-srcover="15back.png" width="83%" data-sounddown="click.mp3"  ></a>
<p id='tab9' class='tab9'><a href=""><img src="7.png" data-srcover="7back.png" width="51%" data-sounddown="click.mp3"  ></a>
<p id='tab10' class='tab10'><a href=""><img src="8.png" data-srcover="8back.png" width="52%" data-sounddown="click.mp3" ></a>

</div>
</div>


<div style="position: absolute; left: 10%"><a href="#" onclick="toggle_visibility('foo');"><img src="tipsbutton.png" ></a>
<div id="foo"><img src="tips.png" width="60%"></div></div>

</body>
</html>

**Beverleyh** · 05-26-2015, 05:51 AM

In your markup, there are width attributes on the img tags - those could be affecting things.

There are also other images defined inside data attributes, which implies that JavaScript is acting upon them in some way too. Maybe there is something overriding CSS in one of your JS files.

If you need more help, please provide a link you your actual page.

**jundo12** · 05-26-2015, 08:24 AM

i've tried it both with and without the width in the image tags. and without the image width in the tags, the image is 5 times bigger than it should be. the only script that isn't visible in the page is a script from here on dynamic drive. it's this one http://www.dynamicdrive.com/dynamici...geswapaudio.js
do you see anything in there that would cause my images to be 5 times bigger than they should be?
i don't have the page on the internet and haven't purchased a server to put it on yet. i'm working on it on my desktop.

**jundo12** · 05-26-2015, 08:44 AM

is it possible the script is somehow using the background-image width of 100% to define the width of the other images on the page? if so, maybe i can just put the background-image in the normal html <body> tag.

**jundo12** · 05-26-2015, 08:51 AM

nah, that's not it. : /
i just removed the background-image and the background-size, entirely. didn't even put it in the <body> tag, and same problem as before. weirdest thing i've ever seen.

**jundo12** · 05-26-2015, 08:56 AM

it isn't the div#tabs either as i have remade the page without the div#tabs and still same problem with images being 5 times bigger than their original dimensions. what the flip lol
this is maddening.

it wouldn't be the jquery would it? why would they resize images to be 5 times bigger on screen than they actually are? that would screw things up entirely. that's part of the dynamic drive script for image swap/sound played onmouse over. you'd think other people would be complaining that their images are being resized by the script if that was the case.

**jundo12** · 05-26-2015, 09:06 AM

nope it's not that either as i just made a new html file with nothing in it but the image and it's STILL 5 times bigger than its original dimensions. it's gotta be my browser because i checked in windows preview and it's the correct size. however, i already checked into the browser being the problem and it's set to display images in their correct sizes.
well thanks for the effort.

turns out i had my desktop set to large. so i set it to medium and it helped a little but the image still will not resize, with or without the width tags and with or without the css image width tags in the header. i still have to resort to using width in the image tags to scale the image down and it still won't resize on window resize, even if given a percentage to display as. i mean 30% of the browser window is STILL 30% of the browser window regardless if it's huge or tiny, so what the heck am i doing wrong?