I'm following a Brad Traversy beginner tutorial on YouTube. He recommends that users diverge from the original layout to produce personalized Web Pages, so I did.
Under the header in his tutorial Brad has a "showcase.jpg" 1920 X 1280px image which is governed by code that shows only a small proportion of the image. He then goes on to move this partially hidden image around to focus on one central area of it. This is great for his purposes.
I'm trying to replace this with an image "mainPic.png" 5692 x3200px that will show in it's entirety.
Both the original image and my replacement image look massively too large for their allocated space, even when I scale down my replacement image to 1897 x 1066px.
Here's what I hope is the relevant HTML code:
Well, what is the allocated space? Does #showcase have a size, more than the min-height, or does it adopt to the content on both directions?
It only has a min-height. It fills the area in both directions, which would be OK but it overfills them so only a small part of the enlarged image shows in what seems to be the allocated space.
If I take the "min-height: 400px;" out of the CSS the image displays as a wide but narrow ribbon.
Assuming the box can expand this can be hard to do with a background image (what if the box gets two screens high?). But choosing an image that can take to be cropped top and bottom and positioning in such a way that the important part is always shown is one way. even if there still are limits.
Take this image. This is what it looks like when you see all of it.
I positioned it in the center and made it 100% wide. When all of it isn't visible, it still works.
Thanks Pandy, I'll work my way through that to understand it better.
TonyH
So that could be an option? I think it may be the easiest way.
Thanks Pandy,
Your change in the code makes the image fit much better, though the outer edges are still cropped. This is after the original image was resized to 33% in GIMP.
So it's clear to me that using your method will work very well if I can make the image smaller.
Given that the container for the image has no size settings in the code, as far as I can see, how can I calculate how much smaller the image needs to be to fit exactly? Or is it a matter of trial and error, smaller and smaller until it fits?
Much appreciation,
TonyH
I think maybe you miss the point. The full width of the image will be displayed, no matter how small or large the box/window is. See the first image, in a very small browser window. The image is resized to fit. Only the top and bottom will be cropped, if needed. With my image it looks good either way - or so I think.
There are limits of course. Should the box become higher than the image at the size it happens to display it won't be pretty. But as long as the real image is higher than the box it will work.
Thanks, in my bumbling way I made the image much smaller, then made the "min-height 700px" and now the image fits much better. But it doesn't resize when the browser window narrows.
I do think your image looks righter though, so I'm going to learn your way.
Thanks,
TonyH
It should resize, both smaller and larger. Mine does, so maybe you got something wrong. Or maybe I misunderstood and you haven't done it "my" way?
It doesn't matter for this what the real size of the image is, for the resizing I mean, if done my way. It of course matters for image quality and how fast the page loads. Alas the two doesn't go hand in hand...
You are way more advanced than I am. But you give me hope and clues on how to get there. Thanks so much for your help.
TonyH
There are other ways. Problem is I don't know what size and shape that box will have in the end. More text is going in there, right?
I'm thinking of moving the text out and downward. Into another div?
You did earlier mention the importance of the aspect ratio.
But how do I decide what the best aspect ratio should be in a variable size of window?
Thanks for your help. It's given me something to think about and work on.
I'm also going to put the current imperfections online as you also suggested earlier.
TonyH
I chopped and changed a few bits of the code and resized the image to get this far but although it looks more like what I want, it doesn't yet resize. But I'll work on that next.
http://www.computeze.co.uk/Flographica/
TonyH
OK, so it is for a header.
If I may suggest...
Make the image lower and a lot wider. A lot smaller text. If the image is sized to fit the width of the window it becomes HUGE on a large screen. On my screen the text is actually hard to read because of the size when the image is upsized. If you extend the alps and the snow to the left the image can be chopped off from the left without hurting anything essential.
It doesn't resize because you have colon after auto here. You should have just a semicolon or nothing.
Thanks, I'll get my daughter to rearrange the image as you suggest, then reintroduce it with the code change.
Your advice is most appreciated.
TonyH
You need a little more than what I gave you I think. But start with the image.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)