Question

出于某种原因，在this页面上，图像没有整齐地位于矩形内;相反，它们在IE，Chrome和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(); ?>" />

我将图像设置为高度为350，宽度为150，以实现均匀性。 “矩形”本身就是

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

我正在使用WP电子商务网格视图精简版插件与WP电子商务（另一个Wordpress插件）。

Answer 1

问题出在第116行的索引文件（http://yadress.com/make-it-yourself/）中。在锚点选择器上。

.product_grid_display .item_image a {
    width: 350px
}

从该锚点中删除width属性可以解决问题。

Answer 2

您有3个选项

扭曲图像以适应框架（div），所以不好

.product_grid_display .item_image a { 宽度：350px; 身高：150px; }
创建固定大小的框架和覆盖属性：隐藏

.item_image {width：px; height：150px; overfollow：hidden;}。item_image img {widht：100％}
使用timthumb裁剪适合框架的图片。（推荐，这是最好的方法，也有利于页面速度）本网站使用timthumb，您可以参考this网站

图像定位不正确

2 个答案: