Question 418434 in Html Question posted in
Some basic documentation can be found here.

Html – Converting the Dimensions of a Playing Card to Pixels (2.5 inches x 3.5 inches)

How do I convert the dimensions of a playing card (2.5 inches x 3.5 inches) to pixels?

How do I do that?

My resolution screen size is: 1280 x 720.

I’m not using it on mobile.

I just want to create stuff on it.

As a visual aid.

Is someone able to help me figure this out?

This is too big though:

240 pixels

336 pixels

Image

Tags:

2

Answers


  1. 0

    The result depends on the resolution of your screen. This spec determines how many pixels fit in one unit of measurement – in this case, inches – and is referred to as dots per inch (DPI).

    Dimensional analysis leads me to believe that the formula is inches * dots per inch, where inches cancel out and you get the amount of dots, or pixels.

    To get the DPI, use the pythagorean theorem: The square root of (1280^2 px + 720^2 px) will give you a diagonal with a length of 1468 px. I don’t know how big your screen is, but let’s assume it’s 15 inches. Therefore, you have a DPI of 96, because you have 96 pixels per inch.

    Width: 1280px
    Height: 720px

    So…

    Width in pixels=2.5 inches×96 DPI=240 pixels

Height in pixels=3.5 inches×96 DPI=336 pixels

    Result

    Playing Card Dimensions in Pixels:
    Width: 240 pixels
    Height: 336 pixels
    Login or Signup to reply.
  2. 0

    In CSS you can use absolute lengths. So you don’t need to convert anything to pixels, just specify your sizes using in.

    body {
  margin: 0.2in;
  background-color: silver;
}
.cards {
  display: flex;
  flex-wrap: wrap;
  align-items: bottom;
  gap: 0.2in;
  font-size: 1in;
}
.cards > span {
  width: 2.5in;
  height: 3.5in;
  flex-shrink: 0;
  background-color: white;
  border-radius: 0.1in;
  box-shadow: 0 0 10px rgb(0 0 0 / 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}
    <div class="cards">
  <span>♠️</span>
  <span>♣️</span>
  <span>♦️</span>
  <span>❤️</span>
</div>

    As @AHaworth indicates, the catch is that the rendered size on a screen will be only a rough approximation, it will not be perfectly accurate. When rendering to a screen, browsers use a fixed value of ninety-six CSS pixels per CSS inch, but a CSS pixel does not render at exactly one ninety-sixth of an inch on all screens. Users can typically also zoom a page within their browser and/or operating system, and the amount of zoom is not available within CSS. So your results will be approximate only. On my laptop screen, the rendered size of the cards in the snippet above is a bit smaller than a real playing card. But it may be a close enough approximation for your scenario, and certainly a lot easier messing about with resolutions and media queries.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search