Converting dimensions of a playing card (2.5 inches x 3.5 inches)
In px value that would be what?
AI told me this which seems way too big:
To convert the dimensions of a playing card (2.5 inches x 3.5 inches) to pixels at a standard resolution of 300 DPI (dots per inch):
So, the size of a playing card in pixel values would be 750 px by 1050 px.
You can’t translate inches into pixels because pixels vary in size depending on the device resolution.
There is an in (inch) unit in css which equates to 96px if memory serves me well but is only useful for printed output as on screen it will be bigger or smaller depending on the devices resolution and density.
So, I can’t create an actual size and shape of a playing card in css?
You can of course create a shape that has the same aspect ratio as a playing card but you can’t have it as a real world size on every screen.
You can make it real size on your own screen by sticking a playing card on your monitor and increasing the css until it matches the card. Anyone who has the same monitor and computer settings as you will see the same size but anyone on higher or lower resolutions will see something different.
I just want to create a desktop version size.
That is all.
Real world size.
Width: px
Height: px
Going to drop this in here and then I’m out.
Please stop trying to apply physical dimensions to a digital medium.
Something on a 14" laptop is not going to be the same as on a 32" monitor. Pixel density and too many other factors will apply.
My resolution screen size is: 1280 x 720
I’m not using it on mobile.
I want to create stuff on it.
As a visual.
Still too big:
AI is telling me this:
To convert the dimensions of a playing card (2.5 inches x 3.5 inches) to pixels, we need to determine the PPI (pixels per inch) of your screen. Given your screen resolution of 1280 x 720, we can estimate a typical PPI value of 96, which is common for many screens.
Using this PPI value, we can calculate the pixel dimensions:
Width: 2.5 inches * 96 PPI = 240 pixels
Height: 3.5 inches * 96 PPI = 336 pixels
Therefore, the dimensions of a playing card (2.5 inches x 3.5 inches) would be approximately 240 pixels x 336 pixels on your screen.
It’s important to note that this conversion assumes a standard 96 PPI. The actual appearance may vary slightly depending on your specific screen’s characteristics.
Yes. And that will work on your screen. It won’t on any other screens. So as long as you’re fine with it only working on your screen, go for it.
I have a desktop that is 1280x720.
I have two monitors: one that is 27 inches diagonal (24x14, rounded, for ease of maths), and one that is 32 inches diagonal (28x15).
If i draw a 320x288 square (1/4 the width, and 4/10 the height) on my first monitor, it would be (24 * 0.25) = 6 inches wide, and (14*0.4) = 5.6 inches high.
If i draw that exact same square on my second monitor, it would be (28 * 0.25) = 7 inches wide, and (15*0.4) = 6 inches high.
They are not the same size in physical dimensions. That’s because the PPI changed. Because the monitor size changed.
You cannot convert Pixels to Inches in a Generalized manner. You can do it for a specific resolution and monitor size, but as soon as you move it to a different monitor or resolution, it will change.
Looks too small to me.
here is a picture of an actual playing card stuck on my screen next to a card that I have sized to match the physical size.
The codepen is here.
Of course that only works for my system but the actual playing card is a physical thing that I stuck on the monitor glass.
(Note also that I believe there are some variations in actual sizes of playing cards)
Think about it this way: I can take your 1280x720 desktop resolution, and put it into a movie projector pointed at a drive-thru movie screen.
Now how big is your playing card going to be?
I’m not sure if you are asking a question or telling me something.
The screenshot you posted matches my playing card exactly.
If you want it to fit your monitor in the same way then stick a playing card on your monitor and fiddle with the size until it matches.
As everyone here has tried to explain there is no correlation between between screen size and a real world size. Otherwise how could you watch people on the TV as the TV would need to be 6 feet tall.
All you can do is maintain the same aspect ratio so that its proportions are correct.
I don’t have cards.
So get a piece of paper, a ruler and a pair of scissors and draw a box the size of a playing card on the paper and then cut it out. This is not rocket science.
I want to place images inside 4 of them:
In another 4 I want to place 1 word in the middle of each.
That is what I have now.
I was able to place the images in.
Why is this not even?
The blue and white aren’t at the same height.
<div class="cards">
<!-- 1 -->
<div class="card">
<img src="https://i.imgur.com/bqaAsOZ.png" alt="Image from URL">
</div>
<!-- 2 -->
<div class="card">
<img src="https://i.imgur.com/bqaAsOZ.png" alt="Image from URL">
</div>
<!-- 3 -->
<div class="card">
<img src="https://i.imgur.com/bqaAsOZ.png" alt="Image from URL">
</div>
<!-- 4 -->
<div class="card">
<img src="https://i.imgur.com/bqaAsOZ.png" alt="Image from URL">
</div>
<!-- 5 -->
<div class="card">
<div class="card__inner card__inner--centered">
<p class="hr2">Testing</p>
</div>
</div>
<!-- 6 -->
<div class="card">
<div class="card__inner card__inner--centered">
<p class="hr2">Testing</p>
</div>
</div>
<!-- 7 -->
<div class="card">
<div class="card__inner card__inner--centered">
<p class="hr2">Testing</p>
</div>
</div>
<!-- 8 -->
<div class="card">
<div class="card__inner card__inner--centered">
<p class="hr2">Testing</p>
</div>
</div>
</div>
</div>
</div>
body {
padding: 0;
margin: 0;
background: #f0f0f0;
}
.cards {
text-align: center;
max-width: 900px;
margin: 0 auto;
}
.card {
position: relative;
display: inline-block;
width: 240px;
height: 308px;
margin: 10px;
border-radius: 8px;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}
img {
border-radius: 8px;
}
p{
font-size: 50px;
color: #ed1c24;
font-family: "Roboto", sans-serif;
}
.card__inner {
box-sizing: border-box;
position: absolute;
display: flex;
top: 0;
left: 0;
right: 0;
bottom: 0;
align-items: center;
}
.card__inner--centered {
justify-content: center;
}
mumble mumble mumble flex.
.cards {
text-align: center;
max-width: 900px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.card {
width: 240px;
height: 308px;
flex: 0;
border-radius: 8px;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}
.card__inner {
width: 240px;
height: 308px;
display: flex;
top: 0;
left: 0;
right: 0;
bottom: 0;
align-items: center;
}
(There’s probably some simplifying to be done there, but i just made it work. A CSS Guru will be along shortly to fix it. :P)
That’s because inline-block elements are aligned on the baseline and that changes when you add the text. You would need to set vertical-align:middle to make them all the same.
However flex is a much better way to do this and @m_hutley has given you some working code for your layout.
I would suggest though that you remove the useless card-inner divs as they are unnecessary.
I would do this based on what you have now:
<div class="card">
<p class="hr2">Testing</p>
</div>