Position images inside block elements problem

1,892 views
Skip to first unread message

Eugene Hetmansky

unread,
Apr 1, 2016, 5:57:12 PM4/1/16
to dompdf
hi there

I use dompdf 0.7.x@beta

the problme I have is how to postion image inside a block

I use html like this:


.logo-wrapper {
    width:135px;
    height:118px;
    line-height: 118px;
    border: 1px solid red;
    margin: 50px;
}

.logo-wrapper img {
    max-width:35px; 
    max-height:18px;
}

<div class="logo-wrapper left">
  <img pm-image="partner.logo" editable="false" class="middle" src="images/logo-en.jpg"  alt=""/>
</div>

On html page it works perfectly: 


But on generated pdf image vertical align doesn't work for me (image is at the top of it's wrapper):


I've also checked your examples here: http://pxd.me/dompdf/www/examples.php

And found that in example  vertical_align_w3 there is also a problem with image postioning (the penultimage variant where images should be positioned in the middle of string):
html:

pdf: 

Could you please face me this a proper way how to position images inside block elements

BrianS

unread,
Apr 2, 2016, 10:36:56 PM4/2/16
to dompdf
This does appear to be buggy behavior. I think for now the only way to work around this would be to position the element within your container. Unfortunately this really only works if you know the container and image sizes and don't need to place the image side-by-side with some text (since the image is taken out of the normal document flow).


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style>

  .logo-wrapper {
    width:135px;
    height:118px;
    line-height: 118px;
    border: 1px solid red;
    margin: 50px;

    position: relative;

  }


  .logo-wrapper img {
    max-width:35px;
    max-height:18px;

    position: absolute; top: 50px;
  }
  </style>
</head>
<body>


<div class="logo-wrapper">
  <img src="http://eclecticgeek.com/images/macro/ants.jpg"  alt=""/>as dfasf
</div>


</body>
</html>


If this won't suit your needs give us a more detailed example and we'll see if we can work out something. You could, for example, use a top margin on the image to push it down within the container while still maintaining flow.

Eugene Hetmansky

unread,
Apr 4, 2016, 3:39:44 AM4/4/16
to dompdf
Thanks for reply, BrianS

I already use "margin-top" to position image.

But anyway would like to see vertical-align working for images some day 

Ali Raza Fayyaz

unread,
Nov 17, 2016, 10:16:11 AM11/17/16
to dompdf
Hi Brian,

I am also facing the same the same issue while generating the pdf with dompdf. I have background image and background image occupy the full screen. Small images are dragged and dropped on the background with absolute(left and top) positions. Pdf is generated from the html. Pdf is generated correctly with background image but sizes of small dropped images on the background slightly reduces in width and height and moves away to the left from the original position as it is shown above by Eugene. Any suggestion from your side will help to fix this issue.

BrianS

unread,
Nov 21, 2016, 10:35:10 AM11/21/16
to dompdf
Do you have some sample HTML/CSS and maybe also the rendered output?

Ali Raza Fayyaz

unread,
Dec 3, 2016, 4:38:38 AM12/3/16
to dom...@googlegroups.com
Hi Brian,

The following the sample HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta charset="ISO-8859-1">
        <title>App</title>
        <link rel="stylesheet" type="text/css" href="libs/css/style.css">
    </head>;

    <body>
        <style type="text/css">
            @page{
                margin: 0;
            }
            #blocksHolder {
                page-break-after: always;
                padding-left:0px;
            }
        </style>
        <div id="blocksHolder">
            <div id="canvas">
                <div id="bgImg">
                    $pdf .= <img src="imgs/backgrounf.jpg" />
                </div>
                <div id='canvas-ele-01' class='background-item canvas-item ui-draggable ui-draggable-handle' style='left:15%; top:10%; position:absolute;' >
                    <div class='canvas-ele-01-img ui-resizable' style='width:20%; height:15%; position:absolute;'>
                        <img src="img/object.png" />
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

the style.css contains the following css.

<style>
.side-bottom-logo {
    position: absolute;
    bottom: 30px;
    text-align: center;
    width: 100%;
    margin: 0 -15px;
}

/************** Canvas Area **************/

#blocksHolder {
    float: right;
    padding-left: 190px;
    /*height: 894px;*/ /*commented out the height*/
    width: 100%;

    -webkit-transition: 0.5s cubic-bezier(.39,1.31,.28,1), width 0.5s;
    -moz-transition: 0.25s, width 0.5s;
    -o-transition: 0.25s, width 0.5s;
    transition: background 0.5s cubic-bezier(.39,1.31,.28,1), width 0.5s;
}

body.on #blocksHolder{
    width: calc(100% - 190px);
}

#canvas {
    /*background: url(../img/bg_02.jpg) no-repeat 50% / 100%;*/
    width: 100%;

    /*position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;*/
}
#canvas > #bgImg > img{
    vertical-align: top;
}
.canvas-actions {
    display: none;

    position: absolute;
    left: 6px;
    top: -54px;
}

.canvas-item.active .canvas-actions {
    display: block;
}

.canvas-actions li:hover i {
    color: #292929;
}

.canvas-actions li i {
    color: #959595;
    font-size: 25px;

    -webkit-transition: color 0.25s;
    -moz-transition: color 0.25s;
    -o-transition: color 0.25s;
    transition: color 0.25s;
}

#canvas #canvas-ele-01 {
    box-sizing: border-box;
    text-align: center;
    width: 250px;

    position: absolute;
    left: 45%;
    top: 235px;
}

#canvas #canvas-ele-01 .canvas-ele-01-img {
    border: 3px dotted transparent;
    /*padding: 25px 30px;*/
}

#canvas #canvas-ele-01 .canvas-ele-01-img.selected {
    border: 3px dotted #fff;
}

#canvas #canvas-ele-01 img{
   width: 100%;
   height: 100%;
}

.canvas-ele-01-actions{
    width:250px;
}
</style>


--
You received this message because you are subscribed to a topic in the Google Groups "dompdf" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/dompdf/-BEn2d6YF1s/unsubscribe.
To unsubscribe from this group and all its topics, send an email to dompdf+unsubscribe@googlegroups.com.
To post to this group, send email to dom...@googlegroups.com.
Visit this group at https://groups.google.com/group/dompdf.
For more options, visit https://groups.google.com/d/optout.

Reply all
Reply to author
Forward
0 new messages