What steps can I take to ensure that images appear in the correct size when converting an HTML page to a PDF format?

I have noticed an issue with my web page when trying to print it as a PDF. Everything displays correctly until I reach a page with images. Strangely, the images appear with the correct width but an incorrect height in the PDF preview.

The HTML code causing the problem is as follows:

    <table width="100%">
        <tr>
            <td>
                <table class="table table-striped table-bordered">
                    <tr>
                        <td width="50%" class="centerText">
                            <span style="font-size:small;text-align: center;">Top Depth Photo</span>
                            <img src="@utility.TopDepthImageUri" width="512" height="384" />
                        </td>
                        <td width="50%" class="centerText">
                            <span style="font-size:small;text-align: center;">Bottom Depth Photo</span>
                            <img src="@utility.BottomDepthUri" width="512" height="384" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table class="table table-striped table-bordered ">
                    <tr>
                        <td width="50%" class="centerText">
                            <span style="font-size:small;text-align: center;">Finish Photo</span>
                            <img src="@utility.FinishImageUri" width="512" height="384" />
                        </td>
                        <td width="50%" class="centerText">
                            <span style="font-size:small;text-align: center;">Area Photo</span>
                            <img src="@utility.AreaImageUri" width="512" height="384" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

Although the images appear fine on the web page, the PDF preview shows only one row from the table and the images are not scaled correctly. (The second row is pushed to the next page.)

Is there a way to precisely control the height and width of the images in this situation?

htmlcssimagepdf

Answer №1

Give this a shot

<table width="100%">
    <tr>
        <td>
            <table class="table table-striped table-bordered">
                <tr>
                    <td width="50%" class="centerText">
                        <span style="font-size:small;text-align: center;">Top Depth Photo</span>
                        <img src="@utility.TopDepthImageUri" style="max-width: 100%; height: auto;" />
                    </td>
                    <td width="50%" class="centerText">
                        <span style="font-size:small;text-align: center;">Bottom Depth Photo</span>
                        <img src="@utility.BottomDepthUrig" style="max-width: 100%; height: auto;" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table class="table table-striped table-bordered ">
                <tr>
                    <td width="50%" class="centerText">
                        <span style="font-size:small;text-align: center;">Finish Photo</span>
                        <img src="@utility.FinishImageUri" style="max-width: 100%; height: auto;" />
                    </td>
                    <td width="50%" class="centerText">
                        <span style="font-size:small;text-align: center;">Area Photo</span>
                        <img src="@utility.AreaImageUri" style="max-width: 100%; height: auto;" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am required to filter out any child elements from a find() operation

HTML: <ul> <li class="listExpandTrigger"><h3>2010 - present</h3></li> <li class="listCollapseTrigger"><h3>2010 - present</h3></li> <li> <ul class="volumeList"> <l ...

javascriptjqueryhtmlcss

Displaying an image that spans the entire width of the browser

I'm currently working on a WordPress site and have encountered an issue with the header image. I want it to span the full width of any browser window. The existing code in the parent theme is as follows: background: url("/test/wp-content/themes/Howt ...

htmlcsswordpress

jQuery UI Datepicker extending beyond its bounds

My Datepicker is expanding and filling the entire screen. What could be causing this issue? Here is my code: Additionally, how can I change the date format in jQuery to appear as dd-mm-yyyy? https://i.stack.imgur.com/IQzVV.png HTML: <!DOCTYPE html&g ...

jqueryhtmlcss

Creating a unique tab spacing effect using HTML and CSS

I'm currently working on my personal website and I'm looking to create a tab-like effect (similar to word processors) for showcasing projects along with their descriptions. Here's an example layout: ReallyLong NameProject Project1 Descr ...

htmlcssformatting

Begin 5 seconds after loading

First time attempting this task. My goal is to trigger the loading of an I have been trying to write a script for this, but it's not functioning as expected. HTML : <div id="div1"> <a id="single" href="#">Single Play</a> & ...

javascriptjqueryhtml

Strong tags within MFC

Is it possible to create labels in MFC (Static text) that contain both bold and non-bold text? For instance, something like this: "I want my label to have a mix of styles like this" Any suggestions on how to achieve this? I am aware that I can change ...

htmlvisual-c++mfclabelbold

Error: Authorization required to access server-side resource [POST http://localhost:3000/serverSide] - Status

I'm having an issue with sending a username and password from an HTML file to a Javascript file that queries an employee table for authentication. The problem arises when the username and password are set to undefined in my serverSide.js file, prevent ...

javascripthtmldatabasepostgresqlexpress

Issue with variable passing during image upload

I am attempting to include an upload button alongside each recipe on my website. In order to save the image path next to each recipe in my database, I need to pass the recipe ID value during the image upload process. However, I keep encountering the same e ...

phphtmlforms

Tips for applying multiple style properties to an element using JavaScript

I have been experimenting with different versions of this code in an attempt to modify a specific element for a coding challenge, but none of them seem to successfully change multiple styling properties of the element upon clicking on a button. Would great ...

javascripthtmlcsstext-styling

The Impact of CSS Border Width on the Size of a PHP Form

Creating a PHP form with a tabbed box has been quite the challenge. With 3 tabs, each requiring different field inputs, I set out to add a border around the form headings and tabs. The border looks great, but it poses a problem - its width spans the entire ...

phphtmlcss

having difficulty implementing the blur effect in reactJS

Currently, I am working on developing a login page for my project. Below is the code snippet I have implemented for the functionality: import React, { useState, createRef } from "react"; import { Spinner } from "react-bootstrap"; import ...

javascriptcssreactjs

The :not selector in a chained condition is not functioning properly for a child div

I have a child div that is being impacted by the .img class. Even when I use the :not selector for this div like so .main .content .index-exp .img:not(.view-image){ /*rest*/ } it continues to affect my div. You can view the issue at this link. Is this ...

htmlcsscss-selectors

Navigate files on a Windows server remotely using a Linux Apache web server by clicking on a browser link

After setting up an apache webserver on Linux Debian and successfully creating an intranet, I encountered a challenge. The intranet is designed to display tables with data from sql queries using php and mysql. However, I wanted to include a hyperlink withi ...

phphtmlapache

Issue with the JQuery FadeIn effect on my website when a div is repositioned for visibility

I have been working on revamping an existing website at www.gjelavoie.com. To enhance the user experience, I decided to use jquery fadein() and fadeout() functions for displaying my Contact form without visitors having to temporarily access the main page. ...

jquerycssfirebug

The loop in MVC is not functioning properly when dealing with various MapRoutes

I am new to MVC and have a good understanding of C#. While experimenting with MVC in Visual Studio, I encountered an issue that is puzzling me. I am struggling to identify the cause of this error. My goal is to print a variable n number of times. It works ...

c#htmlasp.net-mvcasp.net-mvc-5

Ways to replace CSS classes created using makeStyles

To clarify, my development environment is using MUI version 4.12.3. Inside file A, I have a simplified code snippet for a functional component, along with the usage of makeStyles to style a JSX element within the return statement (not displayed here). Ever ...

javascriptcssreactjsmaterial-uimakestyles

What are the alternative ways to deploy a React app on Node.js without relying on Express?

Is there a way to achieve serving html files without using Express in Nodejs? I have experience with serving html files through http/https in a typical website without a frontend framework, but when attempting to do the same with index.html from a React ap ...

htmlnode.jsreactjsexpress

How can I modify the TextField's borderBottom style to be 'none' when it is disabled?

While working within a data cell, I encountered an issue with stacking text. To workaround this obstacle, I opted to create a text field, assign it a value and helper text, disable the field, and change the text color to black when disabled. My current cha ...

cssreactjsmaterial-ui

Reorganize Material UI Grid Items with varying lengths

I'm currently working with a Material UI grid system that appears as shown below: <> <Typography gutterBottom variant='h6'> Add New User{' '} </Typography> <Grid container spacing={3} ...

javascriptcssreactjsmaterial-ui

Dimensions of images on Read the Docs (small image widths)

Using MkDocs along with the Read the Docs theme, I am facing an issue with small images not scaling properly on mobile devices. It seems like this problem is related to the CSS of Read the Docs theme, but I'm unsure how to override the default behavi ...

cssread-the-docsmkdocs