Top > モバイルカスタム > 画像化の表示崩れ

 

画像化の表示崩れ

リストページ
cube/data/Smarty/templates/default/mobile/product/list.tpl

おすすめ商品
cube/data/Smarty/templates/default/mobile/frontparts/bloc/best5.tpl

など・・

<a href="<!--{$smarty.const.MOBILE_DETAIL_P_HTML}--><!--{$arrProduct.product_id}-->"><img
src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProduct.main_list_image}-->"
alt="<!--{$arrProduct.name|escape}-->" height="48" width="60" align="left" />
</a>

このように画像のサイズを指定している。
画像の大きさが全て一緒なら、たても横もサイズを指定してもんだいない。けれど、縦横のサイズが全て違う場合、両方のサイズを指定すると妙な形に表示されてしまいます。

なので、普通は縦か横か、どちらか一方を指定します。

あたりまえですが、。縦が固定されると横がバラバラになります。
横が固定されると、縦がバラバラになります。

 

私の例の場合、縦が統一されていないため、小さいサイズのものが改行に失敗して、表示崩れをおこしています。

 

 

 

 

そこで高さを固定しました。
改行は崩れません。


 

 

 

扱う写真によっては、横を固定したほうがいい場合もあるかと思いますので、ここらへんはそれぞれで考えて下さい。