Video Summary

All right, we’re gonna hop in and start playing around with the heights and the view properties and its values. But before I do, I just wanted to explain what we’re looking at here. I went to Google and I found a very high resolution image. And what we’re looking at here is the image tag with the source and the image URL. And basically the like knowledge is showing this high resolution image. Now if we look at this image, we see that this image is so large, it’s not quite fitting on the screen. But we know that with any webpage that we can scroll up and down and see the full image, right. But what’s also happening with this image is that it’s we’re missing about maybe 20 30%. When you’re talking about on the right side, and anytime we are utilizing any element on the webpage, we needed to stay within the real estate of that screen. We do not want them to have to scroll left to right to view any of our content whether it be an image, it’d be a paragraph, really any anything that we want, we need to have it if it needs to run off, we need to go to the next line and stay within that screen size. 

If what happens is is if a user keeps having to scroll over especially when you’re talking about text, or an image, your key, we want them to view it within that screen. If they end up having to do this the whole way down and they’re just wanting to see this full image and having to go back and forth. Or if it’s a tax, they’re gonna get frustrated. They’re gonna have a bad user experience and they’re gonna end up leaving your webpage. So with that being said, let’s hop in and let’s just see if we can make this 100% of the screen size. So let’s go with and let’s do 100% All right, so now we did 100% And now if we try to scroll left and right, we can do it. And the image is just basically perfectly set to go up and down and scroll right. Now what happens we want to use it as pixels. Let’s try and submit this image fairly large just do 700 pixels wide. 

All right, so now what we’re looking at is that this image is 700 pixels wide. And the height of it is auto populated to be able to scale this image so it looks like the exact Bridgeville so if for instance if this image was say 2000 pixels wide by 1000 pixels tall, if we made it and we took that we want to cut that in size, and we made it 1000 pixels wide, it would auto populate it and only have it 500 pixels tall, right? So what we’re looking at now is this image is 700 pixels wide, and 500 pixels tall. So if you want to change this, let’s take this out. 

Right, it goes back and now that we’re isolating the height of this and auto populates the width as 700 pixels wide, right? So if you’re targeting like either side, it will auto populate to keep the exact scalability as the original photo. Now what happens if we make this with, say 100 pixels. 

Now we’re forcing this image to be 100 pixels wide and 700 pixels tall. Now, as you can see, it’s distorted. It’s not looking great that this is not an image that we want to use. So more times than not, we will always default to use the web because it will auto populate the height of that photo for us. Now, if we want to use height as a percentage, we CSS and HTML will not allow you to do this and the reason why is because the height is is can be very relative to the device. So for instance, we’re I’m looking, you’re viewing this from my MacBook Pro, so we have a fairly large screen size. So our height is going to be a lot different than let’s say a phone or a tablet, right? So doing a percentage just on that isn’t really going to work. Let’s just say if you want to do 50% of the height. 

It’s not going to populate, but what happens is if we use view heights, we use view height and now we’re getting 50% of what the screen is showing us, right? So no matter if you’re on a desktop or a mobile device, it’s going to say it’s going to be 50% of that. So if we had two images, and let’s just copy and paste that in here and we’re going to pay as right, so we’re seeing this, there’s just a little break right there, but that’s what you’re seeing, like we’re gonna do additional code to make sure if it’s in line or block, but what we’re looking at here is, is that it’s taking up literally 100% of this view screen if we didn’t have this little breaking line right here, right and we learned what the BR function was in the HTML course. So let’s just delete this and keep playing around with our with our properties. So we’ve we’ve played with the width we play with the heights. Now what happens if we do max height? 

All right. So no matter how big the screen is, or how big the screen size is, this image will never get be over 400 pixels wide. And let’s say this was the original picture, and we want to make sure that if it gets any larger, we’re not going to distort that image. And the same thing with view heights if you want to do view heights us do. 

Right, so auto populate that out and it won’t get any bigger than that exact height. And this is just basically so when you’re it’s mainly used for images, but sometimes you might want a certain piece of content not to get any larger than it is because if it does if the screen size gets any bigger and might, it might mess up the other settings that you are other CSS properties and values that you have. So setting max height and value will come in handy from time to time, but more times than not you’ll end up this using the width and the height to manipulate your elements. So with that being said, I think it’s a pretty straightforward property value set. I think that if you think just playing around with it with different elements, you know, because we could even do paragraphs we can do divs we can do links, buttons, any HTML element that we have or we’re playing with, we can set the height and the width exactly where we want. And by doing that, we’re able to perfectly size everything that way that we need to. So with that being said let’s hop over to the next lesson.