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?