javascript - How to force browser to show image 3 inches wide? - Stack Overflow

admin管理员组

文章数量:1302268

Having simple HTML code

<table>
    <tbody>
        <tr>
            <td>
                <img  ... >
            </td>
        </tr>
    </tbody>
</table>

and CSS styles

* {
    border:none;
    margin:0;
    padding:0
}
html {
    position:relative;
    min-width:342px;
    height:100%;
    min-height:319px
}
table {
    position:absolute;
    margin-left:-171px;
    margin-top:-159px;
    top:50%;
    left:50%
}
img, table {
    width:342px;
    height:319px;
}

All together accessible with this fiddle (there is just red box image in this example),

a picture of fixed size is centered horizontally and vertically. It is quite simple, however it does not look nice on phones that have high screen resolution, when most of screen looks white and in the middle of screen is something, that user would not recognize without zoom-in.

Using <meta name="viewport" content="width=device-width"> would not help much, as if mobile phone has over thousand of pixels width on just 4 inches, image is still just about inch wide.

I read a lot about screen resolution issues and I haven't find any solution, as most browsers assume 1 inch is 96 pixels, so working with in, pt or pc goes nowhere.

How can I force browser to make the image inside of html page let's say 3 inches wide?

Having simple HTML code

<table>
    <tbody>
        <tr>
            <td>
                <img  ... >
            </td>
        </tr>
    </tbody>
</table>

and CSS styles

* {
    border:none;
    margin:0;
    padding:0
}
html {
    position:relative;
    min-width:342px;
    height:100%;
    min-height:319px
}
table {
    position:absolute;
    margin-left:-171px;
    margin-top:-159px;
    top:50%;
    left:50%
}
img, table {
    width:342px;
    height:319px;
}

All together accessible with this fiddle (there is just red box image in this example),

a picture of fixed size is centered horizontally and vertically. It is quite simple, however it does not look nice on phones that have high screen resolution, when most of screen looks white and in the middle of screen is something, that user would not recognize without zoom-in.

Using <meta name="viewport" content="width=device-width"> would not help much, as if mobile phone has over thousand of pixels width on just 4 inches, image is still just about inch wide.

I read a lot about screen resolution issues and I haven't find any solution, as most browsers assume 1 inch is 96 pixels, so working with in, pt or pc goes nowhere.

How can I force browser to make the image inside of html page let's say 3 inches wide?

• javascript
• jquery
• html
• css
• browser

Share Follow asked Dec 13, 2013 at 15:25 ΩmegaΩmega 43.7k3535 gold badges142142 silver badges211211 bronze badges 7

• First of all, static image size on mobile is something you shouldn't be doing unless it's an icon/thumb picture. Second, why don't you just serve the image the size you want it to be? – CodeTrooper Commented Dec 13, 2013 at 15:28
• 9 Most browsers don't assume 1 inch is 96 pixels, this is defined in the specification: w3/TR/css3-values/#absolute-lengths – James Donnelly Commented Dec 13, 2013 at 15:29
• @JamesDonnelly - I should use different wording, but regardless... it is 96px per quasi-inch (jsfiddle/gNqRF), not real inch, so it is useless! – Ωmega Commented Dec 13, 2013 at 15:34
• Just use 3in instead of 1in: jsfiddle/JamesD/gNqRF/1. 96 * 3 = 288. – James Donnelly Commented Dec 13, 2013 at 15:37
• I have changed my answer to provide a workaround. Take a peek when you get a chance. – Joshua Walcher Commented Dec 16, 2013 at 23:32

 |  Show 2 more ments

6 Answers 6

Sorted by: Reset to default 15 +50

This is just not possible. The in measurement is for print, not for video output. If you use width:8in;height:11.5in then it will print on to paper as a standard Letter sized area.

Even on screens of the same resolution, an inch will be different. For example, a phone versus a projector. They can both have high resolution, but the pixels in an inch on a projected image will tiny. Moreover, there is no way to detect what the size of the projected image will be whatsoever because it is controlled at the lens of the projector (picture a 20ft projector screen with a width of 2000px, that is 8 pixels per inch).

The only possible way to acplish a pixel to inch measurement would be to hardcode it after direct measurement of each mobile device supported and then determine a way to specifically detect the presence of each one of those mobile devices. This is non trivial and will more than likely not work as a solution.

All in all, it is not possible to force the browser to show 3 real inches of size because it really has no clue what that means. Stick to percentages, or make a library of pixel to inch conversions for supported mobile devices.

Have a look at this post, http://ehikioya./online-ruler/ You must still "calibrate" though, there is simply no way around this as others have stated.

There is a "in" width identifier in CSS that is "Inches".

So you would just need to set up a:

width: 3in;

rule for that image.

http://www.w3schools./cssref/css_units.asp

But that's if you're writing CSS code in a corporate environment for people that don't understand anything about the web.

As the ments mention below - a CSS inch is not a REAL inch, though. And that's where media queries e into play. Instead of worrying about how things look in inches, you need to switch to pixels and use media queries to resize your image dynamically based on screen sizes.

Here is a link to a page that explains how digital displays translate into physical inches and includes a calculator program. It's all about the DPI.

As you try different options in the dropdown, you'll see why it's sort of an impossible question to answer with precision. If you're only worried about a single display, then by all means use their calculator and get an exact pixel width for an inch and use that in your CSS.

While I appreciate the intensity of the opinions on this matter, HTML/CSS is being used for much more than just page display on screens. It has actually an excellent system for describing pages in books, catalogs and other printed/digital media.

The W3C has defined an extension of CSS to handle "Paged Media" where the content is separated into separate "surfaces" (pages) of fixed size. The definition is still in draft form but is far enough along that there are several libraries supporting it (weasyprint is one that I have used for conversion to PDF).

The format is pretty powerful and allows for fixed page sizes, headers, footers, page numbering, separate formats for left/right, title and chapter pages. For example, here is a simple style sheet definition for page headers and numbers (taken from W3C definition document):

@page {
  size: 8.5in 11in;
  margin: 10%;

  @top-left {
    content: "Hamlet";
  }
  @top-right {
    content: "Page " counter(page);
  }
}

I mention this, because the OP's question bees legitimate and important when working with paged-media where fixed dimensions for text, images and objects bee important.

For our work, we need to programmatically define reports which, while they may not be printed, need to be viewed in paged format or converted to PDF for storage and possible printing.

There are a number of good tutorials on it: here and here among others.

You can get a pretty good approximation by having the user calibrate what an "inch" is and adjusting everything accordingly. There are several storage options where you can save what the user has calibrated and multiple ways to create the calibrator.

$("img").each(function () {
    $(this).data("width", $(this).width());
    $(this).data("height", $(this).height());
})
$("#calibrator").on("change", function () {
    var multiplier = this.value;
    $("img").each(function () {
        var newWidth = $(this).data("width") * multiplier;
        var newHeight = $(this).data("height") * multiplier
        $(this).css({
            width: newWidth,
            height: newHeight
        });
    });
})

http://jsfiddle/bY2SM/8/

This question is ill-formed and it's highly likely that whatever you want to do is wrong, but I'll leave you with the benefit of the doubt and the following code snippet:

function getPPI(){
  var div = document.createElement("div");
  div.style.width="1in";

  var body = document.getElementsByTagName("body")[0];
  body.appendChild(div);

  var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
  body.removeChild(div);

  return parseFloat(ppi);
}

image.width = 3 * getPPI();

本文标签： javascriptHow to force browser to show image 3 inches wideStack Overflow