Images don't fit - HTML and CSS question

HI all

I cannot figure out why my images and video are distorted and don’t fit the div. I had an image in the banner and it fit beautifully. The video doesn’t.
The images with class “realimage” are much much taller than they should be and don’t fit into the div.
If anyone can help that would be great.

This is my HTML.

Housesitting Travellers
<div id="banner">
  <video autoplay muted loop>
    <source src="./Resources/Videos/Girl with dog - banner video 2796078.mp4" type="video/mp4">
  </video>
</div>

<div class="navmenu">
  <ul>
      <li><a href="https:/trustedhousesitters.com" target="_blank"></a>Trusted Housesitters</li>
      <li><a href="./About me.html" target="_blank"></a>About me</li>
      <li><a href="./Contact us.html" target="_blank"></a>Contact us</li>
  </ul>
<div id="heading">
    <H1>HOUSESITTING TRAVELLERS</H1>
    <p>Housesitting Travellers provide tips, tools and stories about housesitting for the novice, the experienced sitters and pet lovers who are interested in finding out more about how to travel on a budget.</p>
    
</div>

<div class="image">
    <img class="realimage" src="./Resources/images/Lawrie and Huskies.png">
    <img class="realimage" src="./Resources/images/pic of Lawrie.jpeg">
    <img class="realimage" src="Resources/images/pic of me.jpeg">
    <img class="realimage" src="Resources/images/senior citizens.jpeg">
</div>

And this is my CSS:

  • {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: black;
    box-sizing: border-box;
    }

/* banner */

#banner {
min-height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

/* heading h1 */

#heading h1{
font-weight:bold;
font-size: 50px;
text-align: center;
margin-bottom: 20px;
color: initial;
}

#heading {
background-color: gainsboro;
color: red;
padding-top: 75px;
padding-bottom: 75px;
}
p {
text-align: center;
margin-left: 200px;
margin-right: 200px;
}

/* Images */

div.image{

border: hotpink 5px solid;
display: flex;

}

div.realimage {
width: 100px;
height: auto;
overflow: hidden;
display:inline-flex;
}

/* Nav menu */

ul {
list-style-type: none;
margin-right: 10px;
padding: 0px;
width: 50% em;
}
li {
float: right;
padding: 10px;

}

Hi @design2115971126
your .images container is set to display: flex. That distorts the direct children what is intended. Usually, the child elements of a flex container are containers themselves. And they are block-level elements.
What is the intended display of your images? All on one line? Are they all the same height? Then wrap each of them in a <div> or <figure> and set add max-width: 100% to the images.

PS: Please format your code:

Thanks so much for your response.

I’m not entirely sure I understand everything you’ve said. As to my intention - I’m just playing around with the Codecademy lessons in VSCode so I can understand them in the real world. I have a website built with Elementor page builder and I’m trying to reproduce it from scratch.

Anyway…I’ve redone it with this code and it works ok. They are all on the same line and appear to be proportional.

HTML

CSS

/* Images */

div.gallery{
width: 100%;
margin: 5px;
border: hotpink 5px solid;
float: left;
display: flex;

}

img {
width: 25%;
height: auto;
overflow: hidden;
border:blue 5px solid;

It’s so amazing when something works!

Still haven’t been able to figure out how to get the background video in the banner section working ok. If you have any thoughts on this I would appreciate it.

Thanks again.

Please do not post unformatted code. I provided a link with a guide how to format code in my first answer.
Your image path/file name in the video looks odd. You cannot use spaces in a file path or file name.
Give your <video> a width and a height attribute.

Thanks. I’m afraid I couldn’t understand the material you sent. I thought my code was fully formatted. I don’t understand what is not formatted about it.
For some reason it won’t allow me to post html in the my second response to you. I’ll take a look at your comments about the video.
Thanks for your help anyway.

You can mark code either by selecting it and press the </> in the editor or you put three backticks in the line above and in the line below your code.

Oh! I didn’t know what a backtick was and it seemed to relate to languages I don’t know - I’m only on css and HTML at the moment. And I couldn’t see what was meant by the editor. But I think I see that what I am typing in at the moment is the editor! (I am very much a beginner!)

Thanks for taking the time to explain.

I can get the video up but can’t make it fit. Just to be sure I re-downloaded the video from Pexels, gave it a new (no spaces) name and reloaded it to my project. When I try to open it in the text editor I get the message: “the file is not displayed in the editor because it is either binary or uses an unsupported text encoding.” But it still loads to my project.

But I still can’t get it to fit the div.

I don’t know how to give it height and width attributes because I want it to fill the entire background of its div and I don’t know what the height and width are of that div or how to find out. I also want it to optimise for mobile, although I haven’t done any code for that yet. So I don’t want i to be a fixed width and height.

So here’s the video HTML.

 <div>
      <video autoplay muted loop id="banner">
        <source src="./Resources/Videos/Girlwithdog.mp4" type="video/mp4">
      </video>
    </div>

Give your video a width and height attribute anyway. You can still style it with CSS:

width: 100%;
height: auto;

The HTML attributes will take care that it grows or shrinks proportionally.

PS: I also learned here what backticks are and what the difference is between curly braces, brackets, and parenthesis. Not the typical vocabulary in English classes in school :wink:

OK now it looks like this.

<div>
      <video autoplay muted loop id="banner" width="100%" height="auto">
        <source src="./Resources/Videos/Girlwithdog.mp4" type="video/mp4" >
      </video>
    </div>

And it worked (as you knew it would!) Thank you!!

Do you know - this div is the banner on my site. If I wanted to add some text overlay over this video is this instruction a good one to use? https://www.w3schools.com/howto/howto_css_fullscreen_video.asp Or would you suggest another way?

And I would like it to be video div to be not the full screen - that’s how I’ve got it on the Elementor site. There it is set to VH 75%. Is that a CSS property? It looks like it’s some HTML to establish the screen size, then maybe CSS to style it but I’m guessing a bit.

Kirsty

What I meant was rather:
html:

<!-- Whatever the proportions of your video are -->
<video autoplay muted loop id="banner" width="400" height="250">

CSS:

video {
  width: 100%;
  height: auto;
}

But as long as your solution works – fine.

The W3C guide probably doesn’t make sense in your case because they set the video to a fixed position. I’m not sure what you’re trying to achieve: Do you want to fit your video in the header, and in case the header is wider than the video, have some black space, or do you want to cut it off then?

In case you want to cut it off, set the parent div to position: relative and the video as well as your overlay to position: absolute.

There is a CSS value 75vh. That would be 75% of the viewport height.

I just redid it with your second set of code. It works great too. I’m trying to understand why it works - the CSS values relate to the whole div and the width and height values in the html are specific to the video.

What I’m trying to do is have a div which has a video which takes up the entire space - here I’ve done a background video which I’m guessing is the right choice. This div would appear under a header which has the nav menu and logo in it. But I don’t want it to take up the whole screen. I just want it to take 75% of the screen height (or 50 or 25, whatever I think looks best). But I still want it to be the full width.

I thought it might be nice to put some text over the background image too. So that’s why I was asking about the W3C instruction.

Have tried setting the position as you suggest. I’m obviously doing something wrong. I tried setting the #banner to relative and the video to absolute but it doesn’t work. I’m not sure how I would set the video and the overlay separately. I didn’t think it was an (background) overlay, just a background.

If you did it exactly as I suggested, you’re targeting the same element: I suggested to put the width and height attribute in your html on the video element. And in the CSS I styled the selector video, which refers to the video element itself.
Anyway: Even if you give the video width and height attributes with fix dimensions, the element will still resize accordingly to its CSS styles. The width and height attributes are responsible for spacing even before the image or video is entirely loaded. And giving them the attributes representing their real dimensions is a bit more semantic.

I think I misunderstood what you’re trying to do with the video, and I’m still not sure if I get it completely:
You have a video in the background, the header above it (also as an overlay?) and you have a text element below the header also as an overlay?
What happens if the video – which takes the whole width of the viewport – is higher than the viewport then? Scroll or is it cut off then?
When you scoll, should the video move also or stay on the fixed position?

Do you have a link to the Elementor site you already built where I can see what it should look like in the end?

Hey - thanks again. You really are going above and beyond!
I should have included the code.

video {
  width: 100%;
  height: auto;
  
}
<div id="banner">
      <video autoplay muted loop width="400" height="250">
        <source src="./Resources/Videos/Girlwithdog.mp4" type="video/mp4" >
      </video>
    </div>

I don’t think I can include the site because this version is a staging site. The live one is awful but I still haven’t got the staging site up. Can you get anything from this screenshot?

The girl with the dog is the background video,

Ok, I think the screenshot answers some of the questions I asked above but raises a few new ones:

  • You said you wanted the video take about 75% of the viewport height: What happens in portrait mode (iPad etc.) or on extremely wide viewports? Will the video be cut off at the sides (portrait mode) or the top and bottom (wide screens) or will it simply shrink, keeping its original dimensions?
    The latter should already be what it looks like with the attributes in the video and the CSS styles. You just would need to swap the order of the #banner element and the div.navmenu. The div#banner should take the whole width by default.
  • Right now, it looks as if the navbar and the text banner are above and below the video, but you want them both as overlays? With a little transparency for example?

The vh is set at 60% on the staging site. But I want to know how to play around with it to get diff effects. VH60 applies to only that section where the video is. This is the HTML for that section. (Sorry about this - it might be indecipherable - just thought it might help. It’s still a bit of a mystery to me!)

<section class="elementor-section elementor-top-section elementor-element elementor-element-0acd136 elementor-section-height-min-height elementor-section-boxed elementor-section-height-default elementor-section-items-middle" data-id="0acd136" data-element_type="section" data-settings="{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\/\/housesittingtravellers.com\/1611896133301\/wp-content\/uploads\/2021\/02\/Pexels-Videos-2796078-woman-with-dog.mp4-handbrake-compressed2.mp4&quot;,&quot;background_video_start&quot;:0,&quot;background_play_on_mobile&quot;:&quot;yes&quot;,&quot;background_video_end&quot;:70,&quot;animation&quot;:&quot;none&quot;}">
								<div class="elementor-background-video-container">
													<video class="elementor-background-video-hosted elementor-html5-video" autoplay="" muted="" playsinline="" loop="" src="https://housesittingtravellers.com/1611896133301/wp-content/uploads/2021/02/Pexels-Videos-2796078-woman-with-dog.mp4-handbrake-compressed2.mp4#t=0,70" style="width: 701.333px; height: 394.5px;"></video>
											</div>
									<div class="elementor-background-overlay"></div>
							<div class="elementor-container elementor-column-gap-default">
							<div class="elementor-row">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1b5d29b" data-id="1b5d29b" data-element_type="column">
			<div class="elementor-column-wrap">
							<div class="elementor-widget-wrap">
								</div>
					</div>
		</div>
								</div>
					</div>
		</section>

No I don’t want them as overlays but, quite apart from that, I would like to know how to add an overlay to the div with the video if I can.

It’s good in mobile and tablet views - see attached. I’m guessing it will work on really wide screens but I think it would be rare for anyone to look at it that way.


Ok, what I see here is that you cut off the sides of the video when the viewport is in portrait mode. If that’s what you want, you would have to swap the styles of the video to height: 100% and width: auto.
Set the container to overflow: hidden and position: relative.
Set the video to position: absolute and center it with

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

If you want to add an overlay, it is easily done with positioning. There is a lesson on Codecademy about positioning that I’d recommend you to do.
Your video is about 4:3 width I’d say. That means that if it takes 75% of the viewport height, it will not take the whole width on widescreens (forgot to add that) anymore. If you would like to cut off the sides in portrait mode and the top and height on widescreens in order to let the video always take about 75% of the viewport while still taking the whole width, you can only achieve that by adding some Javascript, because you would have to detect the dimensions of your container and swap the video styles depending on the viewport dimensions.

Again - thank you so much. I will take another look at this tomorrow and go over the positioning lessons. I’m staggering through flex as we speak. So I will finish and then get back to this.

1 Like