3:4 in Pixels: The Complete Aspect Ratio Guide with Examples and Formulas

3:4 in Pixels: The Complete Aspect Ratio Guide with Examples and Formulas

![hero]()

This guide explains exactly what “3:4 in pixels” means, how to calculate matching dimensions, and when to use this portrait-friendly aspect ratio. You’ll find ready-to-use sizes, simple formulas, print conversions, and practical workflows for design tools and the web. Use it as a reference to avoid awkward crops, preserve quality, and deliver crisp images everywhere.

What “3:4 in pixels” means

• Aspect ratio is the relationship between width and height, written as W:H.
• 3:4 means for every 3 units of width, there are 4 units of height. It’s a portrait-oriented ratio (taller than it is wide).
• 4:3 is the same shape but in landscape (wider than tall). Rotate a 3:4 image and you get 4:3.

Fast examples of 3:4 in pixels:

• 300 × 400
• 600 × 800
• 750 × 1000
• 900 × 1200
• 1080 × 1440
• 1200 × 1600
• 1500 × 2000

If you see “3:4 in pixels,” it’s just asking for any width–height pair that preserves that 3-to-4 proportion.

The math made simple

Use these two formulas to convert between width and height:

• height = width × 4/3
• width = height × 3/4

Rounding tips:

• If you must round a fractional pixel, round to the nearest integer.
• When possible, choose dimensions divisible by 3 (for width) and 4 (for height). That keeps the math exact and avoids off-by-one issues from rounding.
• Example: width 1000 → height = 1000 × 4/3 = 1333.33… Choose 1333 or 1334. Better: pick width 999 or 1002 (divisible by 3) to get an exact integer height.

Quick code to compute 3:4 sizes and keep even numbers (helpful for some pipelines):

function size3by4FromWidth(w) {
  let h = Math.round(w * 4 / 3);
  // optional: prefer even dimensions
  if (h % 2 !== 0) h += 1;
  if (w % 2 !== 0) w += 1;
  return { width: w, height: h };
}

function size3by4FromHeight(h) {
  let w = Math.round(h * 3 / 4);
  if (h % 2 !== 0) h += 1;
  if (w % 2 !== 0) w += 1;
  return { width: w, height: h };
}

Ready-to-use 3:4 pixel sizes for digital work

Pick any of these and scale up/down in multiples to stay crisp. For retina/HiDPI screens, export at 2× (or 3×) when appropriate.

Note: All of the above maintain 3:4. If you need 4:3 instead, swap width and height.

Printing with 3:4

Pixels to inches depends on PPI (often called DPI in print). Use:

• pixels = inches × PPI
• inches = pixels ÷ PPI

At 300 PPI (a standard for sharp prints), typical 3:4 sizes:

Tip: Always export the exact pixel targets for the printer’s requested PPI. For matte papers and viewing distance, 240 PPI can still look excellent.

When to choose 3:4

• Portrait photography: Headshots, half-body portraits, and editorial portraits often frame beautifully at 3:4.
• Editorial layouts: Magazine columns and blog feature images in portrait mode.
• Posters and flyers: Especially when designed to live alongside text blocks or on mobile.
• Tablet-friendly images: iPad screens are 4:3 in landscape, so 3:4 fits full-screen in portrait orientation.
• Composition tips:
• Leave safe margins near the top/bottom edges to protect hairlines and chins when platforms auto-crop.
• Center critical features or use a slight top bias for faces.
• Use leading lines that emphasize verticality.

![diagram]()

Cropping and exporting to 3:4 in popular tools

Photoshop

• Select the Crop Tool (C) → Ratio → enter 3 and 4.
• Drag to recompose; press Enter to apply.
• File → Export → Export As → choose JPEG/WebP/AVIF, set size (e.g., 900 × 1200), and Quality 70–85 for web.
• Optional: Filter → Sharpen → Smart Sharpen (Amount 30–60%, Radius 0.3–0.8) before export.

Lightroom Classic/Lightroom

• Develop → Crop Overlay (R) → Aspect → 3 × 4.
• Reframe the crop; export with long edge set to 1200, 1600, 2000, etc., depending on target.
• Output sharpening: Standard for Screen.

Figma

• Create a Frame with width × height in 3:4 (e.g., 900 × 1200).
• Place your image and set Fill → Crop to fill the frame.
• Export 1x and 2x (PNG/JPEG/WebP); name with suffixes like @2x.

Canva

• Create a custom-size document (e.g., 1500 × 2000).
• Use the crop handles and “Lock” to maintain ratio, or rely on the canvas size.
• Download with “Size” at 1x/2x as needed.

Mobile workflow (iOS/Android)

• iOS Photos → Edit → Crop → Aspect Ratio → 3:4.
• Snapseed → Tools → Crop → 3:4.
• Lightroom Mobile → Crop → Aspect → 3:4; export at 2× for retina.

Web implementation basics

CSS aspect-ratio (modern, simple)

.card {
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 360px;
  background: #eee; /* placeholder */
  border-radius: 8px;
  overflow: hidden;
}
.card > img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* keeps 3:4 crop without distortion */
}

Padding-top fallback (classic technique)

.ratio-3-4 {
  position: relative;
  width: 100%;
  /* height = width * 4/3 -> padding-top is percentage of width */
  padding-top: 133.333%;
  overflow: hidden;
}
.ratio-3-4 > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Responsive images (serve right sizes)

Note: Explicit width/height attributes help browsers reserve space and avoid layout shift.

Quality and compression

• Formats:
• JPEG: Best for photos with smooth gradients. Use quality 70–85 for web.
• WebP: Smaller than JPEG at similar quality; broadly supported.
• AVIF: Often smallest files; great for photos; slightly slower to encode; ensure fallback.
• Workflow:
• Export a high-quality master, then derive web variants (1x, 2x).
• Avoid repeated recompression; always start from the master when making new sizes.
• Sharpen after resizing (not before) to offset downsampling softness.
• Color:
• Export in sRGB for consistent cross-device color.
• Embed the profile. Some browsers and apps assume sRGB; embedding reduces surprises.
• Advanced:
• Chroma subsampling 4:2:0 is fine for most photos. For graphics/text, consider 4:4:4 (or use PNG/WebP lossless).

Troubleshooting common issues

• Blurry or soft results (from upscaling)
• Don’t upscale small sources. If you must, limit to ≤150% and use “Bicubic Smoother” (Photoshop) or high-quality resampling, then add gentle sharpening.
• Better: re-export from the original RAW/vector or re-crop at source resolution.
• Black/white bars (letterboxing/pillarboxing)
• Cause: The image ratio doesn’t match the container. Fix by cropping to 3:4 or using object-fit: cover.
• For carousels, ensure the container also enforces aspect-ratio: 3 / 4.
• Platform auto-cropping
• Many CMSes and social platforms crop center-weighted. Keep essential details inside a safe area: ~5–8% inset from all edges.
• Provide platform-specific crops when possible.
• Off-by-one pixel edges
• Choose widths divisible by 3 and heights divisible by 4 to avoid rounding artifacts.
• Check export dialogs that silently round to even numbers; confirm final pixels.
• Color shifts
• Ensure sRGB. Disable “Convert to Display P3” unless your audience is Apple-only.

Mini 3:4 cheat sheet

• Formulas:
• height = width × 4/3
• width = height × 3/4
• Quick conversions (width → height):
• 900 → 1200
• 1200 → 1600
• 1500 → 2000
• 1800 → 2400
• Quick conversions (height → width):
• 1000 → 750
• 1600 → 1200
• 2000 → 1500
• Print at 300 PPI:
• 6×8 in → 1800×2400 px
• 9×12 in → 2700×3600 px
• Pro tip:
• Export at 2× for retina (e.g., 900×1200 base → 1800×2400 retina).
• Prefer dimensions divisible by 3 and 4 to keep 3:4 in pixels perfectly exact.

Summary

A 3:4 aspect ratio is a tall, portrait-friendly shape where height is four units for every three units of width. Use the simple width/height formulas, pick integer-friendly dimensions, and export multiple sizes to ensure sharp results across web, mobile, and print. With the workflows and code snippets here, you can crop, export, and implement 3:4 images cleanly and consistently.