Edition in 4/7/19. The implementation https://github.com/spipu/html2pdf, in fact, practically ignores the property background-size
, and that’s not their first problem with CSS. You can contribute to the project by improving it or just reporting the problem, or you can just adjust the image dimensions manually so that it is satisfactory in the PDF. Or, in addition, you can follow the suggestion below.
There are several implementations of html2pdf. I suggest to you the wkhtmltopdf. It is quite powerful to play non-trivial HTML’s in PDF, by using the Qt Webkit engine.
For example, you don’t expose what you have in your image CSS class (class="imagem"
), but to fill a <div>
with an image, with dimensions, would be something like this (tested in Chrome, Firefox and Safari):
#com_imagem_de_fundo {
height: 256px;
width: 512px;
background-image: url(https://ichef.bbci.co.uk/news/660/cpsprodpb/0288/production/_105284600_44935b21-9f20-4727-a2c0-84bef85a4548.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
<div id="com_imagem_de_fundo"></div>
Assuming the above excerpts are arranged properly in a file html page., manages the pdf page. by the command line:
$ wkhtmltopdf pagina.html pagina.pdf
Or, in PHP, using phpwkhtmltopdf:
<?php
require __DIR__.'/vendor/autoload.php';
use mikehaertl\wkhtmlto\Pdf;
$pdf = new Pdf('pagina.html');
if (!$pdf->saveAs('pagina.pdf')) {
$erro = $pdf->getError();
// ... lide com o erro
}
?>
Spin composer require mikehaertl/phpwkhtmltopdf
in the directory of html page., to test. I note that the command wkhtmltopdf
must already be working in the system (phpwkhtmltopdf is a small wrapper).
dua div uses an image class, shows me what’s in this class
– Douglas Teles
Post the link of the lib you are using, which is this html2pdf you use, has the link of his project?
– hugocsl
In the example that posted the
background
is misspelled -backgroud-repeat: no-repeat;
. Your code is like this too?– Victor Carnaval
.image{border: 7px Solid #e0e0e0; border-top-left-Radius: 50px; border-bottom-right-Radius: 50px; height:340px; width:265px; overflow:Hidden;}
– Ricardo