The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Image display too large, diverging from tutorial causes image display problem
TonyH
post Nov 20 2019, 08:28 AM
Post #1


Newbie
*

Group: Members
Posts: 12
Joined: 20-November 19
Member No.: 27,045



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:

CODE
<section id="showcase">
    <div class="container">
      <h1>My wannabee web page</h1>
      <p> I hope you can help</p>
    </div>
  </section>


And here is the CSS code:

CODE
#showcase{
  min-height: 400px;
  background:url('../img/showcase-01.png')no-repeat;
}


I hope the above makes enough sense for someone to suggest a method for getting my image to show fully.

Regards
and thanks for reading.

TonyH
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 20 2019, 08:42 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TonyH
post Nov 20 2019, 08:51 AM
Post #3


Newbie
*

Group: Members
Posts: 12
Joined: 20-November 19
Member No.: 27,045



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 20 2019, 08:58 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
Attached Image

I positioned it in the center and made it 100% wide. When all of it isn't visible, it still works.

CODE
#showcase{
  min-height: 400px;
  background: url('E.jpg') no-repeat center;
  background-size: 100% auto;
}


Attached Image


It can be very hard to fit an image exactly to a box if it doesn't have an explicit size and very little content. There's the image's aspect ratio to consider and you can't know what size the user's browser window will be or what font size he prefers. Things like that can make text content make a box much larger than you had thought it would be.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TonyH
post Nov 20 2019, 10:16 AM
Post #5


Newbie
*

Group: Members
Posts: 12
Joined: 20-November 19
Member No.: 27,045



Thanks Pandy, I'll work my way through that to understand it better.

TonyH
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 20 2019, 10:19 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



So that could be an option? I think it may be the easiest way.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TonyH
post Nov 20 2019, 10:47 AM
Post #7


Newbie
*

Group: Members
Posts: 12
Joined: 20-November 19
Member No.: 27,045



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 20 2019, 11:05 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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. wink.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TonyH
post Nov 20 2019, 12:01 PM
Post #9


Newbie
*

Group: Members
Posts: 12
Joined: 20-November 19
Member No.: 27,045



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 20 2019, 12:41 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TonyH
post Nov 20 2019, 01:12 PM
Post #11


Newbie
*

Group: Members
Posts: 12
Joined: 20-November 19
Member No.: 27,045



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 20 2019, 06:09 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TonyH
post Nov 21 2019, 03:41 AM
Post #13


Newbie
*

Group: Members
Posts: 12
Joined: 20-November 19
Member No.: 27,045



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 21 2019, 07:07 AM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(TonyH @ Nov 21 2019, 09:41 AM) *

I'm thinking of moving the text out and downward. Into another div?


Well, what is the purpose of it all? Do you just want a header with the title of your page and a little text blurb with a nice image behind? That's no biggie. Or is that box gonna fill with text? If the latter you are never going to fit an image to it the way that the the image fills the whole box and so the whole image is visible all the time.

QUOTE
You did earlier mention the importance of the aspect ratio.


Yeah. If you change the aspect ratio the image gets distorted. Take my image as an example. If you put enough text in the box for it to get higher than its wide, you can't have the image fill the box without either cropping the sides or change the aspect ratio (which is horrible).

QUOTE
But how do I decide what the best aspect ratio should be in a variable size of window?

Depends. My image would be good for a header. It would be even better if it had an aspect ratio of 2:3 or wider than 3:4 that it is now. But point is a header never gets very high and the image can take some cropping at top and bottom without looking bad.

The thing is, on the web text flows. There isn't any fixed space for it and no set font size as with printed matter. And you never know how small or big window the page will be read in and how big font size the user will force. So it's impossible to fit text to a space that has an absolute pixel size. The more you accept that and let your pages flow fairly freely, the better it will work. Takes a while to get one's head around this bit because it's so different from what one has experienced before. In the paper world everything has an exact size.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TonyH
post Nov 21 2019, 08:34 AM
Post #15


Newbie
*

Group: Members
Posts: 12
Joined: 20-November 19
Member No.: 27,045



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 21 2019, 09:05 AM
Post #16


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



OK, so it is for a header. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 21 2019, 09:17 AM
Post #17


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.

CODE
background-size: 100% auto:;


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TonyH
post Nov 21 2019, 10:12 AM
Post #18


Newbie
*

Group: Members
Posts: 12
Joined: 20-November 19
Member No.: 27,045



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 21 2019, 12:31 PM
Post #19


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You need a little more than what I gave you I think. But start with the image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 01:15 AM