|
HTML - Help With Resizing Images Based On Browser Size
So I know if you use "%" to define your height and width with tables that it allows you the table to resize based upon a users browser size. My question is how can you do this with images? I tried setting my height and width for my image using "%" but then my image just becomes overly stretched. My professor said that I should create a table and than place the image within the table, and then set the table height and width using "%". The code below is what I tried. It didn't work though.
Any ideas on how to do this? Code: <body>
<table width="100%" height="100%" border="0">
<tr>
<td height="100%" width="100%"><p align="center"><img src="images/Banner.png" align="center" class="source-image" /></p></td>
</tr>
</table>
</body>
Thank you for your help! Similar TutorialsHi! I'm new to this site and new to HTML so please don't bash me. I really need help with a problem I have. I have four images as my buttons and links to various pages on my site. They're rectangles that spread out horizontally on my screen. However, not all computer screens are the same size, so at school for example, since the screen is smaller, the order of my links gets messed up. Is there any way to size an image so that it is 25% of a moniter? If so, could someone just like, right the code down so I may copy? I"m really bad at html. Any help would be appreciated. Thanks! i have created / installed a new drop-down menu. i would like the menu to stretch 100% of the header / page, but, when i resize my browser i dont want the menu to resize along with the page. i want it to stay static and not resize as it is messing up the menu. if you have a look at http://www.bmwgallery.co.uk/ and resize your browser around abit you will know what i mean. please i hope somebody has a simple fix. many thanks Hello everyone, there is a problem with this site I've been designing, If i resize the browser in FF or IE it causes all the tables and images to mess up. The site is http://www.shortdoggkennels.com/. The site isn't finished yet, btw. I have googled this and came up with a few things, I'm pretty sure it has something to do with the minwidth command, but I couldn't find any good tutorials. It would be greatly appreciated if any of you could help in any way. Thanks alot! OK, what I want to do is set an image in a cell which will change size as the browser window is resized. So, say I have a three-cell table: ------------------------------------------------ | ---------------------------------------------- | | ---------------------------------------------- | |----------------------------------------------| | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | ------------------------------------------------ It is set to width=100% and height=100% (using css). The top cell has a fixed height of 50, the bottom-right cell has a fixed width of 600 (all this is just hypothetical, the actual page will be much more complicated). So, the bottom-left cell will be changing in height and width as the browser window is resized. The problem is that when I put an image in the cell and say height="100%" and width="100%" the thing doesn't work. If I give the cell and image a set width or height, the other dimension (height or width) stretches just fine. I know that the problem is that the image wants to maintain a certain aspect ratio (say, 1:3). What I want to know, in short, is if there is any way to override this and make the image render to the size of the cell whether or not that maintains the proper aspect ratio. Hi. I was wondering if there is an html code or a way for me to reduce the size of images on a page by percentages. The reason being, we have images that are 200x200 and then some 200x150, etc. at random sizes. When I use the "image size =" in html, the images are coming out distorted. I would just like to reduce the images by 50% on width and length. Any ideas would be greatly appreciated. Daniel Alright, well I'm needing to resize an image. Not a scaled version, but a 'cropped' version. Like it's called canvas resize in photoshop ect. I hope someone knows what I'm talking about lol Is there a way to ensure that text size renders well even if screen resolution is extreme? Thanks... Hi, I just got back into HTML and CSS and stuff for a new project after a lengthy absence. I'm also trying out PHP for the first time and having a lot of fun with it, but I'm having problems as usual. This doesn't have to do with PHP per se, but if PHP is involved in the solution that'd be just fine. By contrast, I'd like to avoid Javascript, since a lot of people have it disabled by default. One of the things that's always irked me about CSS is how it seems to be completely impossible to define an element's width/height based on its container's width/height without using percentages or without weird things happening when you use padding. Say I want to do one of the simplest things imagineable -- define a rectangular area within the page, with 25 pixels both to the left and right of it, and 12 pixels above and below it, no matter what the browser window's size is. While it's no task to set the rectangle's position relative to the body of the page (using left and top, or whatever), deciding its width or, particularly, height seems to be impossible. 100% - 25px is, sadly, not allowed, even if I incorporate PHP, since PHP has no way of telling what the 100% actually represents. I've been puzzling over this for the last couple hours, and after a great deal of fiddling with alignments, margins, padding, and such, these two pieces of really simple HTML are the best I could do, and they're both flawed: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
<!--
body
{
margin: 0px;
padding: 12px 25px 12px 25px;
background-color: darkblue;
}
#inner_box
{
position: relative;
width: 100%;
height: 100%;
background-color: lightblue;
}
-->
</style>
</head>
<body>
<div id="inner_box">
Text
</div>
</body>
</html>
Paste that into a HTML file to see what I'm talking about graphically. The problem here is clearly that, for whatever reason, the 100% height in inner_box doesn't activate and inner_box ends up only as high as a single line of text allows. I don't know why. But in this next example... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
<!--
body
{
margin: 0px;
padding: 0px;
background-color: darkblue;
}
#outer_box
{
position: absolute;
margin: 0px;
padding: 12px 25px 12px 25px;
width: 100%;
height: 100%;
background-color: lightblue;
}
#inner_box
{
position: relative;
width: 100%;
height: 100%;
background-color: white;
}
-->
</style>
</head>
<body>
<div id="outer_box">
<div id="inner_box">
Text
</div>
</div>
</body>
</html>
Here I've fixed the problems with the first snippet by adding a new container (outer_box) with absolute positioning that covers the entire body area. inner_box goes inside it and tries to act like it did in the first example. Unfortunately, for some reason, outer_box doesn't act like the body tag did in the first example -- when padding is added to it in order to position the elements within it, outer_box expands itself instead of just resizing inner_box, like the body tag did. I've done a lot of experimenting and I simply can't find the solution. All I want is a page with a few pixels of blank space to all sides of a floating rectangle. I uploaded a couple of doctored image samples of what the page should look like, but doesn't: here and here. Anyway, in summation, this is driving me nuts. I know I could probably use Javascript to get the container (body or outer_box)'s width, and go from there, but like I said, I'd rather avoid Javascript. There has to be a better way to do this. Any help would be very welcome. EDIT: After some more experimenting, I've discovered something interesting. If I declare example 1's doctype to be: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> then it works properly. The same cannot be said for example 2. And I really can't tell why. I guess HTML forgives something that XHTML doesn't. Also, example 1 doesn't work if I include the HTML doctype's URL: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Strange. Anyway though, it's important to make example 2 work since I would usually be working with containers within containers, not just within the body tag. So I still haven't solved my problem. Hi Guys, When the site is loaded in Internet Explorer when the window is not maximised upon maximising the window certain elements are no longer in the correct place, its like they stay where they loaded. I can only think that it would have something to do with the CSS Background Positioning on some div's. Any incite to what might be wrong would be appreciated. Cheers -Matt Similar to how most pop-up windows are a fixed size, I was curious as to how I could fix the size of a browsing window (particularly the width) of a page. Vertical scrolling isn't as important, but I would like my index page as well as the pages within the Iframe in the index page to remain a certain width so viewers would only have to scroll vertically to view the entire content of the html document. I have tried "stealing" the coding used in pop-up windows, trying it in both the head and body of the code but to no avail. I have searched for countless hours on the 'net looking for a tutorial that gives the code for this and have had zero luck. (I know it must be possible.) Any and all help/input is greatly appreciated! Thanks so much in advance, Dereck Hi: This is probably a silly trivial question but I can't seem to find the answer in my books ('Beginning Web Programming with HTML,XHTML. and CSS' by Jon Duckett, and 'Javascript - The Definitive Guide (5th Edition) by David Flanagan): How do I ensure that my client's browser window is set to 'Full Screen' when loading is complete ?? (btw, my current page looks confusing if the client's browser window is much less than full size ) I hope there is something llike: onload window.size := 'fullscreen' )) Thanks for any hints - and for any pointers in my books above where I can read up properly on this) -Mel Smith I am in the process of re-designing my website. old site www.ghilliesuitsource.com new site still a work in progress www.ghilliesuitsource.com/gss_test I am struggling with 2 things on my new site. 1) The parallelogram (tilted rectangle) images in the background are seperated by paragraph breaks so that I can alternate between left and right aligned. While all of the forground "stuff" text and product images are AP DIV elements so they hold their spacing. Page looks like I intend it to in IE but netscape/firefox appear to use a different paragraph break line size causing the forground "stuff" to appear lower and lower with respect to the parallelograms, and it gets worse the further down the page you go. 2) It appears as though IE will not change text size inside an AP DIV element when you go to "view-Text Size" This is good because I am using a graphic to act as a border around text. Netscape and Firefox do change font sizes in AP DIV elements so when you select a larger fontsize the text "spills" out of the border. If you can help me out with either of these problems I would certainly appreciate it. hi, because im having trouble configuring my website to work seamlessly (the way i want it) with both firefox AND internet explorer, i was wondering if there was a way that i could make a script that would load the appropriate CSS file for that browser (that i would create of course) and because in internet explorer (havnt had chance to test in firefox) my website looks messed up in some resolutions is there a way i could create a script that would also choose the correct CSS for the users resolution? Thanks people, i know im asking a lot of you guys, but everyone ive spoken to seems so professional and know what they are doing Seasons greetings everyone! hello, I'm an HTML novice who designed/maintains my own site without any expertise at all. One problem I can't seem to figure out: When the browser window is sized more narrowly than the content on the page, the table sections get shoved down underneath one another. Most sites I see don't do that -- when the browser window narrows, the site content stays in place. Any insight about what my error is? You can check out the problem at www.adamgwon.com. Thanks much. Hi there, I have put a youtube video source in dreamweaver, and was wondering if anyone could tell me how i make it so the browser window the video is in clings to the video, i.e the frame is the exact size of the video. Also, however this is done, would it be the same code with images? Thanks in advance, Rob Here is the code <body> <td><a href="<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/NIktYSst2mw"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/NIktYSst2mw" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object> </body> </html> Perhaps it's just me, but I recently noticed this and I'm curious as to how it works. I don't even know if this is the right forum for this though. Take a look at these two pictures and websites. http://www.slidedeck.com/examples/reddal http://www.friendgiftr.com/ If you notice in the picture and the actual website, the first example does not show a tiny dotted border around the link that you click. But on the second site, clicking on a link will have that link surrounded by the thin dotted border. At least that's how it is for me on the latest version of Firefox and Internet Explorer. Is this something browser based? Or what? Why the inconsistency? Is there a way to center images of changing size, without using the <div align="center">? I have several images that I would like to center on a page with having to compute where the center is and then setting the margin to move it over. Thanks, Greg Hi, the images on my Tumblr blog (http://madeinzaire.tumblr.com/) have suddenly been reduced to a small size, although I didn't change the HTML codes. I tried re-editing the HTML manually several times, reinstalling the theme, refreshing the page countless times but the problem is still there. I even tried creating a new blog (http://testathome.tumblr.com/) with the same theme and posted one same photo as in my original blog: in the new blog, the photos have the correct width. But in my original blog, they don't. The strange thing is that in my blog (http://madeinzaire.tumblr.com/) the images look right on the preview, but when I save and close the "customize" box, they remain small on the blog. If I'm not mistaken the codes for the image size is: #content { float: left; width: 760px; border-right: 1px solid #ccc; padding-right: 0px; margin-bottom: 15px; padding-right: 20px; } {block:IfDetailsNextToPost} #content img {max-width: 660px;} {/block:IfDetailsNextToPost} {block:IfNotDetailsNextToPost} #content img {max-width: 760px;} {/block:IfNotDetailsNextToPost} Can someone please help me? (view entire code in attached file) |
|||||||