Question

There is a tag in 150×130:

.listings ul li a.thumb{
    float:left;
    width:150px;
    height:130px;
    border:#ededed 3px solid;
}

When I save an image I check the image’s width and height. with==150 or height==130. And in view:

    <a href="#" class="thumb">
      if ( checking with is full )
      {
         <img src="@Url.Content( Path.Combine( "~/Uploads/Products/", @item.ImagePath ) )" style = "width: 150px;" alt="" />
      }
  if ( checking height is full )
      {
         <img src="@Url.Content( Path.Combine( "~/Uploads/Products/", @item.ImagePath ) )" style = "height: 130px;" alt="" />
      }
    </a>

There are images in this <a> tag in different sizes. For example, 100×130, 70×130, 150×140, 150×80 etc. But one of sizes of image equals to one of sizes of a tag. (150 or 130). Square images are not a problem, but different sized images seem to go in bottom or top, right or left side in the <a> tag.

How can place all size images center of the tag?

Answer 1

First, you need to convert the <a> to a block element with display:block.

Second, I would set your thumbnail as a background image instead and use background-position: center center which would cente rit vertically and horizontally

<a href="#" class="thumb" 
  style="background-image: url('@Url.Content( Path.Combine( "~/Uploads/Products/", @item.ImagePath ) )')">&nbsp;</a>