0

動的に生成されて固定コンテナにロードされるストレッチなしで、フルサイズの画像のサイズを比例的に変更することに問題があります。私はWordpress+WPEcommerceを使用して完全な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;
}

次に、提供された静的スタイルよりも少ない画像がないことを確認してください。この場合、どの画像も幅が 360px より小さくなってはなりません。ブラウザで画像をスケーリングするときの一般的な経験則は、常に縮小することです。そうしないと、お尻の穴が潰れたような画像になってしまいます。

画像の親コンテナーのスタイルに関しては、それほど悪くはありません。静的な幅と高さがあり、オーバーフローを遮断します。画像がそれぞれの静的な値に縮小されるとき、自動値がコンテナの寸法より小さくないことを確認してください。

于 2012-05-13T06:46:36.983 に答える