Help, img doesn't auto fit in div container on certain width

HTML & CSS
1

Hello guys, please help, i’m new to website :frowning:
the img just doesn’t fit anymore from width less than 440 :face_vomiting:
i try it in chrome dev tools
source : https://tinyurl.com/y657oq5s

.content {
    background-color: transparent;
    margin: 0 auto;
    position: relative;
}
img.banner {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

    <header>
        <div class="nav">
            <ul>
                <li class="home"><a href="/index.html">Home</a></li>
                <li class="menu"><a href="/contact.html">Contacts</a></li>
                <li class="menu"><a href="/work.html">Work</a></li>
                <li class="menu"><a href="/about.html">About</a></li>
            </ul>
        </div>
    </header>
    <div class="content">
        <img src="img/homepage-main.jpg" alt="dixen lee" class="banner">
        <h1 class="desc">Hey ! i'm Dixen<br>Welcome to my page</h1>
    </div>

help
help876×429 73.6 KB

2

Try

width: 100%;
max-width: 440px;
height: auto;
3

thanks for replying :smiley: :smiley:
but it still doesn’t solve my problem :sob::sob:

4

There’s not enough information for us to reproduce your problem I’m afraid. :slight_smile:

It would seem that you have set a fixed height for the container or some other method not shown in the code you have supplied. Please provide a working example or link that shows us the problem you are encountering.

You can’t make an image arbitrarily fit any height or width you throw at it and still have it maintains its aspect ratio without the image either being squashed, stretched or cropped in some way (unless by accident or design the container is exactly the same aspect ratio as the image).

Usually you let the width of the image fill its container and its height will remain auto so that aspect ratio is maintained.

Looking at the third image that you posted its obvious that it can’t automatically fill that white space and still maintain its aspect ratio because it would be stretched tall. The only option if you want to maintain that fixed height is to use object-fit:cover on the image and set its width and height to 100%. This will only work in modern browsers (not IE) (background-size:cover does the same thing for background images and has more browser support).

Looking at your pictures surely it would be better not to fix the height of that section and then there’s no problem. You don;t really want a really tall height on a narrow screen anyway.

However, as I said above we really need to see a demo of the problem at hand as the above comments are just best guesses :slight_smile:

1 Like
5

Thankyouuu Mr.Paul,
i just added the link to the source code, hope you can help me solve this problem :smiley:
it’s for my class’s project anw. :smiley::smiley:

6

Hi,

OK I looked at your zip and the problem has nothing at all to do with the image as that is working as best it can.

The white-space is caused by your nav dropping down to the next line and so on as it gets smaller. You can see this clearly in your screenshots where the nav displays less and less menu items :slight_smile:

The reason you don’t see the white text of the nav is because white text on a white background is invisible. You set a min-height of 50px for your header but that is bad move because that was not based on its content but just a magic number guess and will be incorrect for different screensizes.

You need to make the header automatically contain its floated children and then the black background will be seen around the white text. Add overflow:hidden to .nav ul{overflow:hidden} and that will contain the floated list items (although these days you should be using flex rather than floats).

For smaller screens you should be adding a media query at the point where the menu wraps and create a better display for small screen rather than just wrapping text (either a hamburger menu or just items at full width).

As this is a school project I will leave you to work out the details now that you know what the problem is :slight_smile:

1 Like
7

Thankyou very much Mr. PaulOB for your whole explanation, i really appreciate that.
u made my day as bright as :sun_with_face: :blush::blush::blush:

1 Like
8

Here’s a rough re-jig to get you started with a flex-box approach :slight_smile:

 html, body {
	margin: 0;
	padding: 0;
	font-family: 'Fjalla One', sans-serif;
}
.wrap{
	display:flex;
	flex-direction:column;
	min-height:100vh;
}
header {
	background-color: black;
	padding:20px;
}
.nav ul {
	padding: 0;
	margin: 0 auto;
	list-style:none;
	display:flex;
	flex-wrap:wrap;
}
.nav li:first-child {
	margin-right:auto;
}
.nav a {
	text-decoration: none;
	color: white;
	font-size: 24px;
	white-space:nowrap;
	padding:20px 10px;
}
.nav li a:hover {
	color: rgb(155, 152, 152);
}
.content {
	background:url(img/homepage-main.jpg) no-repeat 70% 50%;
	background-size:cover;
	display:flex;
	align-items:center;
	justify-content:center;
	flex:1 0 0;
}
h1.desc {
	margin: 0;
	font-size: 2.5vw;
	padding:20px;
	background:rgba(255,255,255,0.5);
}
.footer {
	margin-top:auto;/*push footer to bottom of screen */
	background-color: rgb(170, 167, 167);
	text-align: center;
	padding: 15px;
	font-weight: bold;
}

@media (min-width: 1500px) {
	h1.desc{font-size:40px;}
}
@media (max-width:800px) {
	h1.desc{font-size:20px;}
}

@media screen and (max-width:380px) {
	.nav a {font-size:20px;	padding:20px 7px;}
	header {padding:15px 10px;}
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dixen Lee</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="wrap">
  <header>
    <div class="nav">
      <ul>
        <li class="home"><a href="/index.html">Home</a></li>
        <li class="menu"><a href="/contact.html">Contacts</a></li>
        <li class="menu"><a href="/work.html">Work</a></li>
        <li class="menu"><a href="/about.html">About</a></li>
      </ul>
    </div>
  </header>
  <div class="content">
    <h1 class="desc">Hey ! I'm Dixen<br>
      Welcome to my page</h1>
  </div>
  <div class='footer'>
    <p>©2019 Dixen Lee</p>
  </div>
</div>
</body>
</html>

You don’t really need to take any notice of screens less than 320px (as there aren’t any of note).

Hope it helps.

2 Likes
9

Hi,
You are using the image tag in html code, from html you can only manage image width, So if you want the proper result then, you have to use CSS properties for image, First Set the image as background & rest of the properties are mentioned below -

.hero-image{
background-image: url(‘your-image’);
background-repeat: no-repeat;
background-position: center top;
display:block;
width:100%;
margin:auto;
height : --;
}

10

I have already answered this question and it has nothing to do with the image tag as such.

Please read the thread in full before answering to make sure you are addressing the correct problem. Your suggestion would not have helped in this situation as the problem was with the nav and not the image as such.

4 Likes
11

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