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

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;
  font-family: sans-serif;
}
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2in;
}
.cards .red {
  color: #d90000;
}
.cards > span {
  width: 2.5in;
  height: 3.5in;
  flex-shrink: 0;
  padding: 0.1in;
  box-sizing: border-box;
  font-size: 0.3in;
  line-height: 1.2;
  text-align: center;
  background-color: white;
  border-radius: 0.1in;
  box-shadow: 0 0 10px rgb(0 0 0 / 0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cards > span > span:nth-child(1) {
  align-self: start;
}
.cards > span > span:nth-child(2) {
  font-size: 1in;
  align-self: center;
}
.cards > span > span:nth-child(3) {
  align-self: end;
  transform: rotate(180deg);
}

<div class="cards">
  <span class="black">
    <span>A<br>♠️</span>
    <span>♠️</span>
    <span>A<br>♠️</span>
  </span>
  <span class="black">
    <span>A<br>♣️</span>
    <span>♣️</span>
    <span>A<br>♣️</span>
  </span>
  <span class="red">
    <span>A<br>♦️</span>
    <span>♦️</span>
    <span>A<br>♦️</span>
  </span>
  <span class="red">
    <span>A<br>♥️</span>
    <span>♥️</span>
    <span>A<br>♥️</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 (the width is just under two inches). But it may be a close enough approximation for your scenario, and certainly a lot easier than messing about with resolutions, conversions and media queries.