|
HTML - Scale Jpeg To Fit Div
I have a DIV that is a fixed size. I want to display a JPG within the div that is stored elsewhere. The problem is the jpg used can change and can be any size.
What I want to try and achieve is to scale this jpg so it fits within the div but still maintainig its original proportions. Is there anyway to do this using HTML and CSS, or do I have to use JS? Thank you for any help in advance. Similar TutorialsI plan to work on a photo gallery and I would like the users to be able to get a magnifying glass that lets them make a default picture bigger (+) or back to default size (-). Sample Web site <http://www.koulut.naantali.fi/oppilaat/samuli.rantala/Maantieto/South%20Korea%20map.jpg> How do I do it? Hi, I'm looking for a way (any way, could be html, css or javascript) to make an image to be scale down only. Here is what I means: if I have something like Code: <img src="picture.jpg" width="100%" alt=""/> it will fill the full space it can occupy (let say the whole viewport). Now if I have image with width resolution of 800px, and my viewport is 1024px, it will be scaled up, and if the viewport is 640px, it will be scaled down. What I want is that if the viewport is 1024px, it is not scaled at all (remain at the original resolution, that is 800px). But if the viewport is less than 1024px, than it will be scaled down to fit. Is there a way to do this? Hi, When to use GIF and when to use JPEG, What's the basic rule of thumb? Regards, Pretty Can someone please tell me the difference between a gif, png and jpeg image? I know gif images are a lower quality of the three right but what exactly is the difference between a png format with jpeg. Does a jpeg image just have higher quality then a png? I need to know this so I make sure to compress images correctly in the future so I do not bog down my website or sites I do in future, thanks everyone who responds it is appreciated. If I'm using basic html/css stuff and tables, how do I get it so my graphics and everything on my site scales properly to the viewers screen resolution? Any tutorials on this? thanks! i have a floating div who's height is determined by content, i would like acquire that div's hight and apply it's hight to a div on the page, when the page loads... Hello everyone, I am looking for some HTML help. I am injecting some code into my Squarespace website builder to have my sites banner be a .SWF file. It's simple and it works: <div style="position:absolute;margin-top:-44px"> <object width="373" height="50"> <param name="movie" value="test_flash_banner.swf"> <embed src="/storage/test_flash_banner.swf" width="373" height="50"> </embed> </object> </div> What I want to do is have it show a jpeg instead of the .swf, if you user can't see .swf files (doesn't have an up to date flash player) Is there a way to do that? hello there... if any one can help thanks in advance i am making a site for my class as a final project its about me and when i tested with firefox everything is perfect loads up in no time and when i test them in ie they dont dont seem to come up the page just loads for ever... if it was for me i wouldnt care about ie but i think my teacher preffers ie for her own use so i have to get it to work in ie ... is there anything i can do to make it work... she told me to slice the images down and load them to a table by pieces it would work should i try that... Hi, I'm hoping you guys can help me. I'm very new to all this so i apologize if my questions seem dumb. I'm starting a new business and selling on Ebay. Instead of doing all my listing in HTML code I'm doing it on Photoshop, then hosting it on Photobucket and then putting the HTML code for it in the Ebay HTML code box etc. This is all fine and works. I'm doing it this way as I know what I'm doing with Photoshop but don't have a clue with HTML tbh. I also need to get it all up and running asap. The problem is I want live links on my listing so that when the text is clicked on, it will take customers to my website, other products etc. Obviously i cant embed the HTML code for the links as its just a jpeg hosted image. Does anyone know a way I can somehow overlay the links over the image using HTML in the Ebay HTML code box? Is there some kind of code to overlay the text over the image, position it accurately and as a live link? Any help or guidance would be really appreciated. Thanks, Chris. Hello all. I hope you can help me with the following problem with the mobile version of http://thekind.tk, my band's website. (direct link for desktops) As you can probably see, the website isn't that big but on my ipod it appears zoomed out. Of course the first thing I tried was putting this line between my <head>: Code: <meta name="viewport" content="width=device-width, initial-scale=1.0"/> But somehow this doesn't do anything for me. Even if I play with the parameters such as putting the scale at 2 or 3, the whole meta thing doesn't seem to affect my site's viewport at all. Any ideas on how to solve this? Ok, I've been designing this site: www.patbianco.com.au and I have small problem I havent been able to solve. The design is specifically for an ipad, and I''ve been using the ipadpeek.com site to help me to check the site aswell as a borrowed ipad. The site works great landscape, but once turned to portrait it gets scaled, the header should be the width of the screen. It's not just he header that is scaled, its the whole page. Here a screen shot of landscape: http://i53.tinypic.com/2sb4dhe.jpg Here a screen shot of portrait: http://i52.tinypic.com/2lj5pau.jpg Portrait CSS: http://pastext.net/2550 HTML: http://pastext.net/2551 Thanks In advance if anyone is able to help me. Hopefully there is, as I'm on a deadline This is for a flash site but I think it needs to be coded in the html page. My Flash swf size is approximately 1000x700. If the browser size is smaller than this the site needs to scale down but if it is larger I don't want it to scale. Just like this http://www.milesaldridge.com/. I've tried publishing the Flash settings at ScaleDefault(Show All) which scales it but I need to stop the scaling upwards at 1000x700. I'd have thought that I could say in the html if (width<1024){scale;} and if(height<700){scale;}. But it's not working. Should it all be done in the html and if so how? Basically I want to put this page "http://3d-story.com/Old-Afgan.html" into a 3rd party widget. When I place this 3rd party widget on my page I can scale the widget frame to any size I want, but the page within it doesn't scale. Looks like this "http://www.wix.com/mettam/test" What code do I need to put into my HTML code so that it will scale to the frame of the widget ? Here is an example of my code with in the widget. Code: <html>
<head>
<title>Old Afgan</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (Old Afgan.jpg) -->
<script type="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
Old_Afgan_03_over = newImage("images/Old-Afgan_03-over.gif");
preloadFlag = true;
}
}
// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (Old Afgan.jpg) -->
<table id="Table_01" width="977" height="695" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://3d-story.com/images/Old-Afgan_01.gif" width="977" height="82" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://3d-story.com/images/Old-Afgan_02.gif" width="190" height="613" alt=""></td>
<td>
<a href="#"
onmouseover="changeImages('Old_Afgan_03', 'http://3d-story.com/images/Old-Afgan_03-over.gif'); return true;"
onmouseout="changeImages('Old_Afgan_03', 'http://3d-story.com/images/Old-Afgan_03.gif'); return true;"
onmousedown="changeImages('Old_Afgan_03', 'http://3d-story.com/images/Old-Afgan_03-over.gif'); return true;"
onmouseup="changeImages('Old_Afgan_03', 'http://3d-story.com/images/Old-Afgan_03-over.gif'); return true;">
<img name="Old_Afgan_03" src="images/Old-Afgan_03.gif" width="497" height="251" border="0" alt=""></a></td>
<td rowspan="2">
<img src="http://3d-story.com/images/Old-Afgan_04.gif" width="290" height="613" alt=""></td>
</tr>
<tr>
<td>
<img src="http://3d-story.com/images/Old-Afgan_05.gif" width="497" height="362" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
is there like a slick way to view a list of files in a ftp directory in html code? The first part , this page i need to put an widesky ad on both sides of the image & also want something that will rescale image to fit page as i need to fit in large images on the page , can this be done people? |
|||||||