Responsive Design and Replaced Objects
One sticking point I haven’t yet addressed is when you have objects on a page—notably images, but also plug-ins like video and Flash. You can’t do much with the latter (especially as Flash won’t be supported on most of your users’ mobile devices anyway), but images present a unique set of obstacles to building responsively, which I’ll come to shortly.
Resizing most objects with percentages (or viewport-relative units if you go that way) is not a problem; you could quite simply set the max-width property to 100 percent to prevent the object ever being wider than its container:
img {
height: auto;
max-width: 100%;
}
Notice that I also set the auto value on the height property to maintain the object’s original ...
Get The Modern Web now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
