Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Alternate resources: 

Flexible Images and Media with CSS's max-width

Video loading...

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:03
    Flexible Images and Media with CSS's Max-width
  • 0:05
    with Amber Himes Matz
  • 0:07
    Our site needs to be able to display images
  • 0:10
    or YouTube videos embedded in the body field.
  • 0:13
    And these images or videos shouldn't break a responsive layout,
  • 0:17
    effectively making it non-responsive.
  • 0:20
    Although there are many different approaches and solutions that vary
  • 0:24
    in complexity, browser support, and developer acceptance,
  • 0:28
    there remains an elegantly simple approach
  • 0:32
    that-- while it doesn't solve every problem with responsive images--

Flexible Images and Media with CSS's max-width


There are quite a few images on the site that aren’t scaling very well. They’re either way too small or way too big and break the layout. For now, we just want ensure that our images don’t overflow beyond the layout container and that they are viewable at a comfortable size across all viewport sizes. While we're at it, we can make sure all HTML media objects stay safely contained in a flexible container, especially when sizing down.

Log in or sign up to download companion files.
Additional resources: (checkout branch 10-max-width)