0

我在不拉伸动态生成并加载到固定容器中的情况下按比例调整全尺寸图像的大小时遇到​​问题。我正在使用 Wordpress + WP Ecommerce 来动态调整完整的 singke

例如，使用以下 html 代码：

<div class="image" style="display: table; width:360px; height: 430px; #position: relative; overflow: hidden; text-align:center;">
       <table width="100%"  class='nocolour' style="display: table-cell;margin-left: auto;
        margin-right: auto; text-align: center; vertical-align: middle; height:auto;">
           <tr style=" width:100%;">
           <td valign="middle" style="vertical-align:middle; width:100%; text-align: center;">
           <div class="imageplaceholder" style="max-width:100%; width:100%; height: 430px; overflow: hidden;margin: auto; text-align:center; "><a style="width: 100%; text-align: center; " href="<?php echo wpsc_the_product_permalink(); ?>">
                 <img style="height: auto; max-width:100%;margin-left: auto; margin-right: auto; display:block; overflow:hidden;"  class="product_image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" title="<?php echo wpsc_the_product_title(); ?>" src="<?php echo wpsc_the_product_thumbnail(get_option('product_image_width'),get_option('product_image_height'),'','single'); ?>"/>
             </a></div>
            </td>
          </tr>
        </table>
    </div>

和CSS：

.wrapper .page-container .content .rightcontent .main-product-image img{
   width: 360px; height:430px; display:block; overflow:hidden;
}

有什么想法可以纠正这个问题吗？

非常感谢任何回复。

4

1 回答 1

1

同时设置宽度和高度参数将拉伸和扭曲您的图像以适应这些尺寸。将 CSS 中的宽度或高度（无论您喜欢哪个）设置为“自动”。所以：

.wrapper .page-container .content .rightcontent .main-product-image img{
    width: 360px; height:auto; display:block; overflow:hidden;
}

其次，确保您的所有图像都没有比提供的静态样式少。在这种情况下，所有图像的宽度都不应小于 360 像素。在浏览器中缩放图像的一般经验法则是始终按比例缩小。否则，您的图像将看起来像一个破碎的屁眼。

就图像的父容器的样式而言，它看起来还不错。你有一个静态的宽度和高度，它会切断任何溢出。只要确保当图像缩小到它们各自的静态值时，自动值不小于容器的尺寸。

于 2012-05-13T06:46:36.983 回答