XHTML and CSS Tutorial - 39 - Max Width & Height Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

alright guys welcome back to your thirty
ninth tutorial on CSS N and this is
aural I'm going to teach you guys how to
automatically set the maximum width and
maximum height of images or actually any
elements using CSS now I set images
because that's what most commonly you
apply it to for example why would you
want to set the maximum height of
something if you can just automatically
size it using XHTML or you know some
photo editing software why do you need
explicitly tell CSS that you need a
maximum height for an image well for
example say you're doing this say you're
making a website that you're later
wanting to turn into your blog or
something and you're always copying
images from other websites and posting
on your website first of all I'm pretty
sure that's illegal so don't do it but
other than that the sizes are always
different and you're always giving
pretty much random pictures and putting
on your website so therefore if you
don't want to always have to go into
your photo editing program and resize
everything you can just tell CSS this is
the size that I want this image to be
and aside from that another example
that's probably even better example if
you ever went to ebay everyone always
uploads photos of all their items and
they're all different sizes different
types but when ebay displays them on
their main page they're all the nice
little same sized thumbnail so in order
to get all a bunch of different photos
the same size you need to give it a kind
of guideline so let's go ahead and first
and by the way I'm going to be working
with images in this tutorial but you can
be working with any element you want so
anyways I'm going to go ahead and use
three images that I have on my computer
source equals my face dot ping
and let's just go ahead and copy this
and paste it down here twice and my face
stopping and aside from that I have one
called Madden 1.jpg and lastly I have
sell JPEG so now let's go ahead and save
this and see what beautiful website we
got whoa hey mama I mean my face is a
pretty good size for this but scroll
down here whoa mom I'm gonna have to
scroll all over to see this big whopping
humping thing and also geez Louise that
is one big seller right there
so say say I was selling my face and
Madden for Xbox and also a cell of my
body on eBay well this thing just isn't
going to work so here's what I would
need to do in order to set a maximum
size putt for all images on your web
page here's what you need to do go ahead
and type image as your element then as
your rules
the first property that we're going to
alter is max - height and now for the
value go ahead and put a pixel size so
for example 200 pixels would be
appropriate and then under this might as
well set max width while you're here max
width and might as well make this one
200 pixels - why the heck not so now
what we're telling our browser is this
all right
if you have any image that's taller than
200 pixels shrink it down to 200 pixels
if you have any image that's fatter than
200 pixels skinny it up to 200 pixels
and we do this so the big images fit
nicely on our small web page so now
let's go ahead and save this and see
what happens it took all those images
that were bigger and it shrunk them down
so they nicely fit or fit nicely if you
prefer that on our web page so pretty
cool it kept the same you know aspect
ratio and that is what we got so aside
from that another thing
you can use this too but it's not as
commonly used is actually men with and
min height and I don't even have to tell
you what got those do so you know but
anyways the only times actually never
use those the only really rule I ever
use is max height and max width and I do
this too a lot whenever I'm like uh like
if I made an auction website for someone
I would take all their images and Sheree
come down and thumbnails so all the
websites look the same or if you made a
website like Facebook or something where
everyone was uploading huge images the
size of billboards then you might want
to shrink it you know to fit it on there
nice profile picture so anyways that is
the idea behind max height in max width
it's very easy to understand and there's
your example and don't forget you can
use this with all elements not only
images with tables and you know other
stuff too so anyways thank you guys for
watching don't forget to subscribe and
I'll see you guys in the next video