Help - Search - Members - Calendar
Full Version: image size
HTMLHelp Forums > Web Authoring > Graphics, Flash and Multimedia
minidiapolis
This is a simple question, but I can't remember the solution. On http://www.sullens.net/~mthomas/cins257/demos/test.html how do I change the width of the logo? If I change the width in photoshop, it distorts the image. I know there's a fix, I just can't remember it.
Frederiek
Be sure to have "Constrain proportions" checked in the dialog box in PS. Then if you type the width, the height will change accordingly to retain the image aspect ratio.
minidiapolis
that's not working. if I set the width what I want then it's too tall
Dr Z
Then, the base aspect ratio (i.e. height vs width) of the original image is the problem. You may want to go back and examine the the logo design.
minidiapolis
can you explain that in a different way?
Darin McGrew
I'm not sure I understand what you're trying to do. Are you trying to resize the "New Image Salon" part of your logo.jpg image? Are you trying to resize your logo.jpg image? Are you trying to expand the "background" part of your logo.jpg image while keeping the "New Image Salon" part the same size? Or are you trying to do something else?
minidiapolis
I'm trying to resize the logo.jpg so it comes across the top of the page more.
Darin McGrew
Can you show us your best attempt at resizing logo.jpg ?
minidiapolis
On http://www.sullens.net/~mthomas/cins257/demos/test.html the width is where I want it but the height needs to be a fourth of what it is
pandy
But then it will be distorted.
minidiapolis
That has been the problem all along , hence why I'm asking for help
Darin McGrew
Personally, I'd split the "New Image Salon" part from the scrollwork. I'd put the "New Image Salon" part in an img element, with the scrollwork as part of the background image. Actually, maybe two background images: A non-repeating one at the top with the scrollwork, and a repeating one behind it that extends the basic textured background to the full display area.
minidiapolis
I apologize, I think you're thinking of my original idea. I changed my mind, I'm not having the logo.jpg as a background image. I want the logo to be at the top of the page if that makes sense
pandy
Crop it to the proportions you want then.
minidiapolis
I don't think that will work, will it?
Frederiek
How was the image created in the first place? Don't you still have a .psd copy of the image, composed of layers (one for the bkg color, one for the swirl, one for the text bkg and one for the text)?
minidiapolis
My client gave me the brochure and I scanned it in - I don't have a "true" logo file. I'm hoping I can get a good copy of that file.
minidiapolis
I might be making some progress. Is it too big or too grainy now?
Frederiek
I agree, it doesn't really look too well. You might ask them for the original images of the brochure, preferably in .psd. Or find a PS brush for that swirl and recreate the image at the desired size.
wgabrie
Does the logo need to be exactly like the scan? I think you could easily achieve a similar look using text, like so:

CODE
<div style="padding: 50px 20px 10px;background-color:#cb5;">
<h1 style="margin: 10px auto; width:500px; padding:0.5em; text-align:center; border:thick solid #ffa;background:#433; color:#ffa;font:bold xx-large georgia, serif;letter-spacing:.2em;font-variant: small-caps;">New Image Salon</h1>
</div>


If you need more decoration, perhaps, a repeating background texture would do. There are many free sites out there just for this reason, like Absolute Background Textures Archives.

Also you can get really fancy with css. Here is food for thought take a look at these fancy css photo frames: CSS Image Frames Style Tutorial.
jackracker
The problem is that your image file's dimensions are different from the height and width assigned on your <img> tag in the html.

There are several things you can do...

1) Figure out what dimensions you actually want to show the image at online. Recut your photoshop file to resize it to exactly those dimensions. Then change the height and width on the image tag to be identical to the actual size of the image, i.e. <img width="300" height="322" src="assets/logo.jpg">

2) Use css to target the image and give it height and width there, i.e. #logo img {width: 300px; height: 322px;}
a) You can also use {width: auto; height: auto;} to let the image's natural size show through.
b) You can also use {width: 300px; height: auto;} or {width: auto; height: 300px;} and replace the 300px with any other size, in which case the browser will fit the image to the specified size, and then scale it so it's the right shape.

3) If you want to store the image at a large size, but then crop it so the entire thing doesn't show up on your webpage, you need to set the size of the image as mentioned above, so that the img is rendered at its natural aspect ratio. Then you can crop the image by using its container div to only show a portion of it, i.e.
#logo img {width: 300px; height: 322px;}
#logo {height: 100px; width: 300px; overflow: hidden;}
/* and if you want to position the image so that the top of it is above the #logo div (and therefore is cut off), you can add the following */
#logo img {margin-top: -100px;}
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.