2

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?

Improve this question

1 Answer 1

Reset to default
2

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

Improve this answer
1
  • 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, 2016 at 13:48

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .