Thumbnails with correct size on your ASP.NET web page

Rating: 7075 user(s) have rated this article Average rating: 5.0
Posted by: sergey, on 02/12/2008, in category "ASP.NET"
Views: this article has been read 28071 times
Abstract: Very often we need to present thumbnails in particular size for our client, especially in GridView, ListView and other complex web controls. I show how to do it using only CSS.

I could not find simple solution of this problem in the Internet.

Very often size of our Thumbnails must be for example: no more than 100px width and no more 100px. We could not fix this size in the asp image control, because in this case it will be stretched or shrink against original shape and depends on image orientation (portrait or landscape).
 
Fortunately, we have a very simple solution. Let’s assume we have an image control on our ASPX web page:
 
<center>
<asp:Image ID="ThumbnailImage" ImageUrl='<%# Eval("ThumbnailUrl")%>' CssClass="Thumbnail" runat="server" AlternateText='<%# Eval("Description")%>' />
</center>  
 
And what do we need now – only add a CSS class:
 
.Thumbnail
{
 max-height:100px;
 max-width:100px;
 text-align:center;
 vertical-align:middle;
}
 
Yes, you are right – all magic happend in this new css parameters: max-height and max-width. Very easy, are you agree?

How would you rate this article?

User Feedback

Post your comment:
Name:
E-mail:
Comment:
Insert Cancel