By default, the ccResizeImage
binding reserves a minimum height on the page layout to accommodate an image before the image loads. This prevents the layout from shifting after the image loads. To make this possible, the ccResizeImage
binding injects a <div>
tag into the HTML that wraps around the <img>
tag and sets it to the minimum height of the image. In general, this approach provides for a superior shopper experience, however, there are occasions where it may need to be disabled. For example, some browsers have problems with <div>
tags placed inside <td>
tags. For this reason, you have the option to disable the addition of the <div>
tag by setting the setMinHeightBeforeImageLoad
attribute to false
, for example:
<img data-bind="ccResizeImage: { source: '/file/v2/products/AntiqueWoodChair_full.jpg', alt:'Antique Wood Chair', errorSrc:'images/noImage.png', errorAlt:'No Image Found', setMinHeightBeforeImageLoad:false}"> </img>