![]() ![]() In the future the css3 property object-fit may provide even more control to the above hierarchy problem. Sometimes though it’s not practical to create new images and in those cases the above might work well for you. Keep in mind that replacing the image using techniques I discussed a few weeks ago is another solution to this same problem. ![]() Next you want to reset the image’s width and height to their native dimensions (here 800px and 400px respectively) and use margins to determine what part of the image should show. ![]() First add overflow: hidden to the image’s container. It’s something you’ll have to decide on a case by case basis.Īndy’s solution involves some css and some thought about what’s the important part of the image. A horizontal image that’s larger and more dominant in the hierarchy on a wide screen browser, could end up being the smaller and less dominant image on the narrow screen of a mobile device.Ĭheck Andy’s post for a good example where this happens on a site and also an example where the hierarchy is preserved.ĭepending on your design and the images this may or may not be an issue, but typically hierarchy is something you’d want to remain consistent across devices. The problem this can create is the scale between images can change. In fact, the normally smaller inline images appear larger, inverting the visual hierarchy.īecause adaptability is based on width, horizontal images need to scale more than vertical images. Andy Clarke pointed this out in his post about maintaining image hierarchy.īut because of this banner image’s wider aspect ratio, when it’s squeezed down to fit a narrow column it loses its position in the visual hierarchy of the page. This maintains the aspect ratio of the image, but there’s a got’cha that’s not immediately obvious. The first step in having your images be flexible is to set max-width to 100% and let the height of the image adjust. While collecting resources for those posts I came across a few more image related issues and thought I’d combine them in a single post and present them here. #Responsive resize image next to each other how toWe looked at how to serve different images to different devices and then a couple of potential ways to replace bitmap images with icon fonts and SVG. For the last few weeks we’ve been talking about images in the context of responsive design. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |