Question

我有一个问题，即按比例调整全尺寸图像而不进行拉伸，动态生成并加载到固定容器中。我正在使用Wordpress + WP电子商务动态调整完整的单曲

例如使用以下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;
}

任何改善问题的想法？

非常感谢任何回复。

Answer 1

设置宽度和高度参数将拉伸和扭曲图像以适合这些尺寸。将CSS中的宽度或高度（以您喜欢的任何一个）设置为“自动”。所以：

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

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

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

按比例调整整个图像（动态但没有固定的图像尺寸）到div容器，而不会拉伸到容器的每一侧

1 个答案: