Autosizing image in with specified dimention

Say you have the following code:

<div style="width:100px; height:100px; border:10px solid green;">
    <img src="foo.jpg">
</div>

Now if the size of the image is more than 100p X 100p then the image gets out of the boundary of the <div>. To accommodate the image in the <div> anyways, you can define the CSS style attribute display as flex for the <div> that contains some resizable elements(applicable on Images as images are resizable). So instead of the previous code use the following code:

<div style="width:100px; height:100px; display:flex; border:10px solid green;">
    <img src="foo.jpg">
</div>

References

http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s