Putting the image that you want to dynamically crop in the background is ideal when the image is purely decorative. Both look the same, but each is specially suited to different situations. You can create a variable cropping effect with either background or foreground images. The image itself doesn’t change in size-the amount of space in which it’s allowed to show does, and the rest of the image just remains hidden outside of that space. I’ve already written about how to make images literally scale, but another way to change the amount of screen area an image takes up is to dynamically change how much of the image is shown at any given time. While fixed-width images can work within flexible layouts-as long as they’re not too large, or you have matching minimum widths in place-there are lots of ways you can dynamically change the screen area that an image takes up. Since the area available for an image to display within a flexible layout changes on the fly, your images may need to as well.
#Css background image resize block display for free#
You can download most of Chapter 9 for free as a PDF at the Flexible Web Design companion site, as well as download the HTML, CSS and image files that go along with this tutorial. This tutorial is slightly adapted from Chapter 9 of my book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. It’s possible to dynamically “crop” both background and foreground images as the layout changes in width, solving the problem of overflowing fixed-width images in a flexible page.
0 kommentar(er)
