图像定位不正确

Question

For some reason, on this page, the images are not positioned neatly inside the rectangles; instead they are shifted slightly to the right in IE, Chrome, and Firefox.

<img height="350" width="150" class="product_image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" src="<?php echo wpsc_the_product_thumbnail(); ?>" />

I set the image to have a height of 350 and width to be 150 for uniformity. The "rectangle" itself is

<div class="item_image">
                        <a href="<?php echo wpsc_the_product_permalink(); ?>"> <!--IMG HERE--></a></div>

I am using the WP e-Commerce Grid View Lite plugin with WP e-Commerce (another Wordpress plugin).

Answer 1

The problem is in the index file ( http://yadress.com/make-it-yourself/ ) on the line 116. On the anchor selector.

.product_grid_display .item_image a {
    width: 350px
}

Removing the width property from that anchor solves the issue.

Answer 2

You have 3 options

1. Distortion the image to fit the frame (div), so bad

   .product_grid_display .item_image a { width: 350px; height :150px; }

2. Create a fixed-size frames , and overfollow attributes : hidden

   .item_image{width:px;height:150px;overfollow:hidden;}.item_image img{widht:100%}

3. use timthumb to crop a picture fit the frame.(recommend, this is the best way, also good for page speed) This website uses timthumb, you can refer to this site