1

I'm working on Visualforce pages rendered as PDFs. I've been using background-size: contain on divs where I want the image (set as a bg image) to shrink so it does not overflow the page or certain regions I wanna keep fixed. This already works on one of my pages but not on another. I mean, the image does not shrink to be seen completely in the div.

The one that's working:

<td style="text-align: center; vertical-align: bottom; width: 50%;">
  <apex:repeat value="{!celdaImg.attachments}" var="imagen">
    <div style="background-image: url('{!URLFOR($Action.Attachment.Download, imagen.Id)}');" class="image">
  </div>
  </apex:repeat>
</td>

The style class "image":

.image {
  background-size:contain; 
  background-repeat: no-repeat; 
  width: 100%; height: 400px; 
  background-position: center;
}

For the one that didn't work I copied the same style. The only difference is it's not inside a table. Just divs. Since it didn't work I tweaked it as follows, adding !important and making sure the image is set before the size:

<apex:repeat value="{!evidencia.attachments}" var="adjunto">
  <div class="container"><div style="
    background-image: url('{!URLFOR($Action.Attachment.Download, adjunto.Id)}');
      background-size: contain !important;" 
  class="image"></div></div>
</apex:repeat>

The difference is only I added a containing div for the one that actually displays the image. The style of that outer div is:

.container {
  display: table-cell; /* because the other one worked inside a table cell */
  width: 100%;
  text-align: center; 
  vertical-align: bottom;
}

What can I try to have this image shrink to fit completely in a div smaller than it?

1

Salesforce PDF engine do not support all CSS3 tags. AS background-size need CSS3 support, that's why it is not working. here is a work-around for background-size property. Hope this will help.

<apex:page showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false" renderAs="pdf">
    <head>
        <style type="text/css">
            #box {
                position:relative;
                width:384px;
                height:256px;
                border:3px double #f00;
                margin:10px auto;
            }
            #box img {
                position:absolute;
                width:100%;
                height:100%;
            }
            #box div {
                position:absolute;
                width:100%;
                height:100%;
                color:#fff;
                line-height:256px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <img src="{!URLFOR($Resource.simpson)}" alt=""/>
            <div>this is some content</div>
        </div>
    </body>
</apex:page>

Output: enter image description here

  • how can I keep the aspect ratio with this solution? that is why I used background size contain and it DID work already on a VF rendered as PDF!! – Pedro Otero Nov 17 '16 at 13:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.