Responsive Web Design is an approach in which a designer intends to provide an optimal viewing experience.
Before knowing about the concept of scaling images, let’s have a look on “Responsive Web Design”.
Nowadays people want to get access to the Internet data from any place using a wide range of portable devices- desktops, laptops, tablets etc.
And quite often we have to struggle with a site’s content when trying to fit it our browser windows. Many times, we have to zoom in or out all the time and even see some content blocks broken. All this makes web surfing a real torture!
Smart web developers and site owners have faced necessity to create designs for different resolutions and devices. They want their sites to be compatible with BlackBerry smartphones , iPhones , iPads , netbooks etc. This is a short overall concept of responsive design which is in great request today.
SCALING IMAGES:
Scaling Images is one of the important and useful techniques for creating responsive web design. Scaling images is used to develop responsive layouts. The images are scaled according to the browser width to keep proportion in relation to the rest of the page content.
HOW TO SCALE IMAGES:
Adding the CSS max-width property to the image element, and giving the property a percentage value, is the easiest way for scaling images.
After that the browser determines the image’s width as a proportion of the width of its enclosing element, and also it automatically adjusts the image’s height to keep the correct aspect ratio of the image.
CSS has long had the ability to instruct browsers to size images by percentages, rather than absolute units or intrinsic size. The percentage is interpreted based upon the size of the containing element, rather than as a percentage of the intrinsic size of the image. Accordingly, an image 100px wide with a percentage size of 50% may be rendered many different sizes, depending upon the size of its container. And, if that element is itself sized with a percentage, it may change depending upon screen resolution and the size of the browser window.
EXAMPLE:
First, add a photo to the main content area of our responsive layout example, and make it scale according to browser width.
<div id="content"> <div class="inner"> <h1>Responsive Layout</h1> <img src="photo.jpg" alt="Flowers" class="photo" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Curabitur et leo dui, eu semper tellus. Vivamus aliquam, mi ultrices fringilla varius, augue nisl tincidunt elit, eu tincidunt ante metus ac mauris. Praesent congue blandit nunc, eu facilisis ligula faucibus sit amet. Proin eget turpis nulla. Phasellus mattis nisi a ante aliquet posuere. Vestibulum tortor quam, luctus imperdiet venenatis nec, molestie eu massa. Vivamus nec ipsum viverra augue aliquet bibendum. Morbi ac felis purus, sed vehicula mauris. Integer tempor mollis libero id hendrerit. Fusce sit amet urna quis justo varius pulvinar dapibus sed metus. <p>Ut vel mauris eu velit fringilla lobortis. Phasellus accumsan sem in nisl luctus gravida. Vestibulum vitae scelerisque eros. Nullam id leo erat, et congue elit. Nunc volutpat justo tempor magna pretium adipiscing. Vivamus eget massa odio. Suspendisse potenti. Aliquam erat volutpat. Proin faucibus leo vel sem lobortis sed hendrerit diam suscipit. Maecenas dignissim, neque sit amet tristique pulvinar, ipsum orci porttitor odio, ac auctor nunc mauris ac nisi. Sed vitae dui et urna mollis elementum et id purus. Suspendisse bibendum quam id lacus condimentum ut pharetra orci mollis. Curabitur et consequat nisi. Suspendisse dictum luctus neque, id tincidunt justo rutrum non. Aenean fringilla quam ac magna ornare vehicula.</p> </div> </div>
Next, add some CSS to float the photo to the right, give it an appropriate margin and border, and set its width to 65% of the container width using the max-width property:
.photo {
float: right;
margin: .4em 0 10px 10px;
border: 10px solid rgba(0,0,0,.1);
max-width: 65%;
}
Finally, to make the most of the screen real estate on very small devices, let’s remove the photo’s border when the browser width dips to 480 pixels or less:
/* If the viewport width <= 480 pixels ... */
@media screen and (max-width: 480px) {
body {
margin: 0;
}
#header .inner {
padding-top: 5px;
padding-bottom: 5px;
}
#header .inner, #content, #nav, #sidebar {
margin-bottom: 5px;
}
#nav ul {
padding: 5px 7px;
}
.photo {
border: none;
}
}
As the browser is resized, notice how the image scales with the width of its container so that it always remains in proportion to the content. With browser windows less than 480 pixels wide, such as mobile phone browsers, the image’s border disappears to make the best use of the available space.
For very narrow browsers on mobile devices, we remove the image border using a media query to save space.
So this is how, the scaling technique works and helps us in developing a responsive Design layout.
CSS provides a simple and easy way by which one can scale images for responsive web design.
In CSS, Min & Max Width property is simply used for creating responsive images.
- Min & Max Width Property:
Max-width property allows us to set the max width of the element. The purpose of max-width is to prevent the element from extending the boundary.
Max-Width Container
In the example below, the container is specified to display at 800px if possible, but it should not exceed 80% of the boundary width.
.container {
width: 800px;
max-width: 80%;
}
Min-Width
Min-width is opposite to max-width. It sets the minimum width of an element. In the example form below, min-width is used on the input text field to prevent the input from getting very small when scaling down.
CONCLUSION:
As web technology is now evolving fast, we should learn to adopt responsive techniques as a standard practice. We must also keep evolving in the way we think about its practice, and how we can better responsive design beginning today. The techniques like “Scaling Images” provides a responsive view and therefore must be learnt in order to ensure a great user experience for everyone as we each adopt newer technologies, gadgets and many more.
