When posting images, having to calculate the appropriate width and height according to the width of the area of blog entries on the site is annoying. What's worse if you decide to redesign your blog and the new width is so radically different, the images "overflowed". A better solution is to let the browser handle the size of the photos automatically, resizing it according the available your design have allocated at the time of rendering.
The concept is pretty simple: specify the width at 100%, specify the height to "auto".
Using stylesheets
On the webpage itself...
<img src="http://www.blogger.com/photo.jpg" id="photo" />
On the stylesheet...#photo {
width: 100%;
height: auto;}
Using inline styles
<img src="http://www.blogger.com/whatever.jpg" style="width: 100%; height: auto;" />
That's all there is to it. Which one should you use?
If you have control over the stylesheets of your blog, it's best you to use them to ensure uniformity across your site. Else, using inline styles would suffice but every image your intend to post would require you to retype the styling specifications and it can get pretty irritating, especially when you forget to add it in and have to go back and repost.
If you have control over the stylesheets of your blog, it's best you to use them to ensure uniformity across your site. Else, using inline styles would suffice but every image your intend to post would require you to retype the styling specifications and it can get pretty irritating, especially when you forget to add it in and have to go back and repost.
No comments:
Post a Comment