This is a little piece of code if you add as a CSS property to anything, will give the user (website viewer) to control the size of the element. The user can enlarge it to his desires, whether its an image or just a text box, it works.
This is one of the things that must have inspired for responsive web designs. You must have heard the buzz about responsive web designs. If you haven’t, here’s a quick brief. Responsive web design is a web developing method through which the website resizes itself according to the device resolution of the visitor. So if somebody is opening the website through a smart phone, the website will give it a customized mobile view, if someone is opening it on a tablet, the website will adjust accordingly and so on.
You might also like: How to Create Multiple Columns using CSS3
View Demo
HTML code
1 2 3 4 5 6 7
<div id="example">
<div class="post">The Invictus body is really light. It only weight 990kg. This is very important for the dangerous sports car. This sports beast have really a masculine look. This car have a dangerous face the head lamps are really in aggressive mode.</div>
<div class="post photo"><img src="images/image-1.jpg" alt="" /></div>
</div>
CSS code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
#example {
width: 300px;
margin: 0px auto;
padding: 40px 0 0;
background-color: #fff;
font-family: Verdana, sans-serif;
font-size: 11px;
}
.post {
margin: 0px 0px 40px;
padding: 15px;
position: relative;
background-color: #fff;
-webkit-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset;
box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset;
overflow: hidden;
resize: both;
}
.photo img {
width: 100%; height: 100%;
}
The text box style just resizes the box – not the text. The picture looses its proportions when resizing. Its hard to think about a meaningful usage for this functions.
jm2c