![]() ![]() The simple fix then is to use a conditional comment targeting IE6 and then set the width to 100%. IE6 doesn’t support max-width, but it treats the width property similar to max-width. IE6 is finally falling out of use so it’s up to you whether or not it’s worth supporting. It may also not be much of a problem depending on your site. The above doesn’t quite work everywhere.įirst up is IE6, which probably isn’t any surprise. This is all seeming too easy isn’t it? Unfortunately we’re not there yet. We can refine the above css to be:Īnd we’re done. This works not only with images, but with video and other media. Modern browsers are good at maintaining proportions so the image will resize well as the layout resizes. If the image is smaller than the container the image will be its default size. If an image is larger than it’s container it will be scaled back to be the same size as the container. And since we’ve set the measurement in % the image can resize itself as its container resizes. #RESPONSIVE RESIZE IMAGE NEXT TO EACH OTHER HOW TO#We already know how to keep elements from growing too large and that’s through the max-width propertyĪnd with that one line of code we’ll prevent our images from ever being larger than their containers. Let’s consider the case where the image is larger than its container. However in all other cases it will either be too large or too small for the layout. Unfortunately this fixes the image size and is completely inflexible.Īt one specific point the absolutely fixed image is probably the perfect size. Typically when adding an image to a web page we set a width and height using absolute measurements like ‘px’. I also highly recommend Ethan’s new book on responsive design.Īlso Richard Rutter has set up a page experimenting with flexible images using max-width that’s worth checking out. We’re building toward responsive layouts by discussing each of the 3 parts necessary for responsive design in a separate post.Īll the credit here belongs to Ethan Marcotte and I recommend his post on flexible images. Last week we talked about elastic layouts and flexible grids. Text easily reflows as it’s container resizes, but what about images and other media? How do we make them flexible to keep our layout flexible? A flexible layout isn’t all that flexible if some of the component parts are fixed. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |