When the web first came about all of the pages were just text with hyperlinks. It was a fluid web of information. Then we added images to the mix, and then embeds, and then iframes and videos…. and by this point, the web had translated to tables and CSS with fixed widths.
With the advent of responsive design we are now back to our fluid web of information, but when a lot of the interactive elements
To take a look at some of the ways you can handle flexible media we will break them down into their individual elements
The main problem with flexible media
There are a few issues that crop up with flexible media but the biggest issue is around ratio which is a knock on effect from defining width and height on the element itself. As the viewport grows larger the contained image/video/iframe grows wider as well, which means that it needs to grow taller as well.
By setting elements to width: 100%; solves one part of the equation, but we can not do the same for the height because we don’t want it to be as tall as the container, it needs to be as tall as its ratio will allow depending on its width.
Confusing? Lets do a quick example.
Lets say that we have a screen that is 800×600 (old school, right?) and on that screen we have an image that is 200px wide and 100px tall (200×100). In the old days that would be fine and the image would always be 200×100, but now we want that image to grow with the viewport. For simplicity lets say that the image needs to fill the width of the container, and the container is 100% (or 800px).
The flexible image would scale from 200px to 800px width to reach the width of the container, which is a 600px increase. Conversely the image height would only need to scale from 100px to 400px — an increase of just 300px.
If we set the width of the image to 100% we get the right width of 800px, but if we did the same thing to the height the image would be 600px.
You should note that this is an issue only because we apply height and width against the image itself. If you do not set the width and height against the image on the element then as long as you define the width it will grow as expected. This is more often the case when you have a CMS that controls the inserting of images. There is another issue here though (there always is).
The browser understands the img and video elements because it has access to those file elements directly, however when it comes to an iframe the browser is literally loading another webpage inside the item and therefore has no concept of how tall or wide the elements contained within the iframe might be.
Let’s take a look at each of those elements one-by-one.
Flexible Images
Flexible images fairly straight forward to get running responsively when compared with getting the iframes going.
We’ve already discussed possible issues with ratio’s when the image width and height is explicitly set on the image element itself so lets take a look at how that appears within the browser itself.
Let’s check that out with this boat image which has the height and width defined as per the image size:
The markup we will be using looks like this, a typical CMS output for an image.
<img width="300" height="195" class="width-100"
src="../../wp-content/uploads/2017/02/HAML-HTML-Preprocessor-300x195.jpg" alt="Boat" />For the CSS we’re going to apply the width at 100% to get the image to become flexible within the container itself. Remember that if an image is set to width: 100% on a container that occupies 70% of the viewport, then the image will occupy 70% of the viewport (but 100% of the container).
Let’s apply the class of .width-100 and see how that affects the image….
.width-100 {
width: 100%;
}
You might initially think that we need to do the same thing to the height, but that would cause the image height to become 100% of the viewport rather than keeping within the image aspect ratio as you can see below with the class .width-height-100 applied.
.width-height-100 {
width: 100%;
height: 100%;
}
The answer for this is to set the height:auto, which allows the browser to automatically set the height of the element to the required ratio given the flexible width.
.width-height-100 {
width: 100%;
height: auto;
}
Now we have some lovely responsive flexible images, however let’s take a look at what happens when we drop in a really large image…
That’s WAAAAY too big for our container because we’re telling the image to be 100% and the size of the image is wider than that of the container. To make sure this is fixed we can change width to max-width which will ensure that the image will not grow beyond its own width or the width of the container. Back when responsive design came to the foray we were supporting IE6 which did not support max-width, however since then IE6 has gone by the way side and we can just go with max-width only and stay safe.
.max-width-100-height-auto {
max-width: 100%;
height: auto;
}
