weird problem with images
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>
