Dimension of a header image

HTML & CSS
1

Since there are so many browsers and devices, how do you know what size a header image should be?

1 Like
2

The trick is to make it “fluid”, so it will adjust to the size on any screen.
Any image can do this with the following code:-

img {
    max-width: 100%;
    height: auto;
}

With width: 100% (or max-width) the image will be no larger than its containing element.
The height: auto will force it to keep its aspect ratio.

Note that using width it will fill the container.
With max-width it will go no larger than its actual pixel size, so will not blow up and lose definition.

2 Likes
3

Thanks so much for the help and the explanation but it didn’t work. See http://ossianenterprisepark.com/test.html

4

It was a fairly general solution, as not specific design was given to start with.
But in that example, you applied the CSS rules to the container, not the image.

Instead of:-

#building {
    max-width: 100%;
    height: auto;
}

try:-

#building img {
    max-width: 100%;
    height: auto;
}

But there may be other considerations, such as where/how you want the image placed when the screen is bigger than the image.

1 Like
5

Note that you should take a similar “responsive” approach to your header text too.

#oep {
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	font-size: 50px;
	font-weight: 400;
	width: 550px;
	margin-left: auto;
	margin-right: auto;
}

Change the fixed width to a max-width also.

max-width: 550px;

…So the text can wrap on smaller screens.

6

I changed it but it’s still not behaving properly.

7

You are still getting horizontal scroll bars, partly due to the issue with the header text I mentioned already. But there are other issues in your CSS.
The image itself is now responsive, but if you are still not happy with it, you need to define what “behaving properly” means.

8

I think I made all the changes needed but the image still doesn’t stretch all the way across the screen. I attached a screenshot.

Capture
Capture1262Ă—502 66 KB

9

Hi there mindapolis1,

you need to have these amendments…

OEP.css file…

body {
    height: 100%;
    width: 100%;
    margin: 0;
}

…and this in the internal…

#building img {
    width: 100%;
    height: auto;
 }

coothead

10

Hi there mindapolis1,

Check out the attachment to find a fully
responsive working of your page. :winky:

mindapolis1.zip (63.7 KB)

coothead

2 Likes
11

Unless you add the meta viewport tag your media queries will have no effect for any small devices.

You will notice in the head of the zip that @coothead posted there is an appropriate viewport meta tag for you to copy. Do not omit this tag or all you will get is a microscopic version of a desktop site which will be totally unusable on mobile.:wink:

1 Like
12

Thanks! Everything is working. I really appreciate the help!

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.