Keep images and videos from taking over

[baggyeyes]

I found this CSS snippet while trying to find a way to keep large images from swallowing the layout whole:

img, embed, object, video {
max-width: 100%
}

Vanseodesign.com: Flexible Images/

I've only tested it on my reading page, but it seems to work very well.

I hope people find this useful!

Comments

[rise]

A bit late to be replying, I know, but thank you so much for reminding me about max-width! I've been making use of it in posts lately when I've had to put in elements that might be too big. Usually something like:

<img src="http://imageurl/" style="max-width: 100%;" border="0" />

I've also found max-width useful for making sure multiple images size properly, like when you have three images you want to stay together on the same line:

<img src="http://1stimageurl/" style="max-width: 33%;" border="0" /><img src="http://2ndimageurl/" style="max-width: 33%;" border="0" /><img src="http://3rdimageurl/" style="max-width: 33%;" border="0" />

So I'm very glad you reminded me about it! I'd completely forgotten you could even DO that with css. Derp.

[baggyeyes]

Cool! I like your theming work! Glad you found this useful.

[dee_groovy]

awesome, thanks for sharing! I've added it to my layout :)

[baggyeyes]

You've got a lovely layout!

[dee_groovy]

Thanks! faithwood @ LJ has some really nice designs!