Screen sizes

Browser compatibility

The compatibility table on this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub


Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
media feature Chrome Full support 3 Edge Full support 12 Firefox Full support 3.5 IE Full support 9 Opera Full support 10 Safari Full support 5 WebView Android Full support ≤37 Chrome Android Full support 18 Firefox Android Full support 4 Opera Android Full support 10.1 Safari iOS Full support 4.2 Samsung Internet Android Full support 1.0

How To — Height Equal to Width

Step 1) Add HTML:

Use a container element, like <div>, and if you want text inside of it, add a child element:

Example

<div class=»container»>   <div class=»text»>Some text</div> <!— If you want text inside the container —></div>

Step 2) Add CSS:

Add a percentage value for to maintain the aspect ratio of the DIV. The following example will create an aspect ratio of 1:1 (the height and width is always equal):

Example 1:1 Aspect Ratio

.container {  background-color: red;  width: 100%;   padding-top: 100%; /* 1:1 Aspect Ratio */  position: relative; /* If you want text inside of it */}/* If you want text inside of the container */.text {  position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0; }

Other aspect ratios:

.container {  padding-top: 62.5%; /* 8:5 Aspect Ratio (divide 5 by 8 = 0.625) */}

Изображения

Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений

IMAX Aspect ratio

IMAX scene in Interstellar

16:9 scene in Interstellar

IMAX movies and theaters are a complete ecosystem that encompasses everything from cameras, speakers, room shapes, screen finishes, and even film types. More importantly, though, part of IMAX’s proprietary system is their own aspect ratio. IMAX has a few different ratios used now to accommodate for different types of rooms, but there are two major ones: 1.9:1 and 1.4:1.

  • 1.9:1 is meant for more standard digital projectors and is used in IMAX Digital theaters. It is a bit taller than the standard Cinema 2.35:1 (21:9) ratio.
  • 1.4:1 is the more iconic ratio. It is incredibly tall and almost square in shape. This is what IMAX is most known for since the screens are usually much larger than normal cinema theaters and the height makes them a very immersive experience.

Most movies today that use IMAX still are filmed with a mixture of 21:9 ratio and 1.4:1 IMAX. As seen in the picture above, IMAX content fills up the entirety of the 16:9 screen. The image itself goes beyond the height of a 16:9 TV, but it is cropped in Blu-ray films to fit the screen. You don’t get the whole experience, but you still get a more complete picture than if it was letterboxed to the standard cinema ratio.

Frequently Asked Questions

Below is a list of frequently asked questions related to aspect ratios in photography.

What is aspect ratio of an image?

In photography, aspect ratio represents the relationship between the width and the height of an image. It can be expressed as a ratio or as a decimal number.

What is the best aspect ratio?

There is no such thing as the “best” aspect ratio, because it all depends on what the photographer’s objective is. The most popular aspect ratio on the Internet today for photographs is 3:2, but other aspect ratios like 4:3 have also been gaining popularity.

What is the aspect ratio for 1920×1080?

The aspect ratio of HD video (1920×1080) is 16:9. You can find out the aspect ratio of different resolutions by using our .

What is the aspect ratio of 4K video?


The aspect ratio of UHD 4K video is 17:9.

Hope you found this article useful. If you have any questions or feedback, please let me know in the comments section below!

What’s an Aspect Ratio Calculator?

Let’s say you have a video you shot, or a movie trailer, or even a digital series you want to debut across different channels. An aspect ratio calculator will help you do the math to see how it can fit in other formats. Aspect ratio calculators came in handy for anyone who had to post-convert a TV show made before the 2000s and put them in widescreen. 

Or what if you shot in IMAX, but are showing your project on a standard screen? Like some did for The Force Awakens. 

Image via Making Star Wars Image via Making Star Wars

Try this aspect ratio calculator by Digital Rebellion. 

Try this aspect ratio calculator by Red Route. 

Try this aspect ratio calculator by Ratio Calculator. 

Types

Original Aspect ratio (OAR) is the aspect ratio in which the film is originally produced. This might be altered to be viewed in other modes, such as television. Converting aspect ratios is possible only by enlarging the original image to filling the area, along with cutting off the excess area, or by stretching the image to fill in the area according to the new ratio.

Modified aspect ratio (MAR) is the aspect ratio assigned in order to fit a type of screen, and different from the dimensions in which it is filmed.

The resolution of digital images can be described as pixel resolution, spatial resolution, spectral resolution, temporal and radiometric resolution.

Pixel resolution defines the number of pixels used in digital imaging. Resolution can be expressed as a horizontal x vertical measurement, in megapixels (horizontal value multiplied by the vertical value, and divided by a million), or per unit area.

Spatial resolution refers to how closely the columns (horizontal value) and rows (vertical value) can be resolved in an image. It not only depends on just the number of pixels but also on the system that creates the image.

Spectral resolution refers to the resolution of different color wavelengths in a coloured image.

Temporal resolution refers to the resolution of events at different time points in movie cameras.

Radiometric resolution is expressed in number of bits and defines the differences in intensity in image files.

Why are Aspect Ratio and Resolution important?

Aspect ratio is important when resizing images or videos so as to avoid distorting them. It is also an important consideration while buying large screen LCDs and Plasma TVs. The aspect ratio for these is 1.78, which is similar to that offered by theaters, and thus attempt to give you the same experience.

Resolution is important when printing high quality images and graphics. More resolution generally means more data and information. Most High definition television and LCD have a fixed-pixel display, and this tells you the amount of detail the monitor can display. A fixed-pixel display always coverts the source material to fit its own resolution.

Smartphones

Until 2010, smartphones used different aspect ratios, including 3:2 and 5:3. Since then, most smartphone manufacturers have switched to using 16:9 widescreen displays, driven at least partly by the growing popularity of HD video using the same aspect ratio.

Since 2017, a number of smartphones have been released using 18:9 or even wider aspect ratios (such as 18.5:9 or 19.5:9); such displays are expected to appear on increasingly more phones. Reasons for this trend include the ability for manufacturers to use a nominally larger display without increasing the width of the phone, being able to accommodate the on-screen navigation buttons without reducing usable app area, more area available for split-screen apps in portrait orientation, as well as the 18:9 ratio being well-suited for VR applications and the proposed Univisium film format. On the other hand, the disadvantages of taller 18:9 aspect ratio phones with some phones even going up to 20:9 or 21:9 is reduced one-handed reachability, being less convenient to carry around in the pocket as they stick out and reduced overall screen surface area.

Aspect Ratios for Streaming Services

So her’es the deal: lately, some streaming services have been cutting off almost 25% of movies by reformatting them to fit 16×9 televisions. While this practice is supposed to stop, with letterboxes being added to share the proper format, you should still be aware. If you’re creating content for Netflix, Amazon, or HBO, you should know their aspect ratios. That way you’ll know how your work is presented on the screen. 

Netflix Aspect Ratio 

Netflix shows almost everything in 16×9. So if you’re trying to watch a movie that’s natively in 2.39:1, you’re going to get the black bars. They also have been known to use 2:1 aspect ration. This aspect ratio is also used in many new Netflix series and is less wide than scope, but still gives the viewer the sense of a wide screen. 

Amazon’s aspect ratio is 16×9. 

HBO Aspect Ratios 

HBO’s aspect ratio is 16×9. But some of their older shows, like Curb Your Enthusiasm, can still be shown in 4:3. 

What does it look like?

Black bars fill the extra space when the aspect ratio of the screen and content do not match.

When the aspect ratio of the content you are trying to watch doesn’t match the aspect ratio of your TV, you’ll usually end up with black bars.

Depending on the type of mismatch between the picture and the display’s ratio, the black bars appear in different places. Content wider than the screen it is played on will have horizontal black bars, while content that is taller will use vertical bars.

As you can see, when you watch a 21:9 movie on a normal 16:9 widescreen TV, you will have some black bars at the top and bottom. This is represented by the top center TV in the illustration.

Aspect Ratio for Social Media

Instagram Aspect Ratio  

If you’re going to do it for the ‘gram, you should do it with the right aspect ratio. Instagram has specific guidelines for what works on its site. 

  1. Square (1:1)
  2. Standard Horizontal (16:9)
  3. Alt Horizontal (1.91:1)
  4. Vertical (4:5)

Aspect Ratio

We all love to shoot stuff to post on Facebook. Whether its the trailer for your new venture or a web series, you want people to be able to like and share the best content. Facebook supports:  

  1. 16×9
  2. 9×16
  3. 4×5
  4. 2×3
  5. 1×1

You can upload phone videos, movie trailers, and fluidly share videos from all other social channels if they occur in the aforementioned formats.

Aspect Ratio

Like Facebook, Twitter is a great place to get your message out there. It’s great to get retweets and social engagements. Twitter is one of the best places to get your message put to the people and to interact individually. Twitter supports the following aspect ratios: 

  1. 1×1  1200 X 1200
  2. 2×1 1200 X 600
  3. 3×2 1200 X 800

Aspect Ratios for Streaming Services 

So her’es the deal: lately, some streaming services have been cutting off almost 25% of movies by reformatting them to fit 16×9 televisions. While this practice is supposed to stop, with letterboxes being added to share the proper format, you should still be aware. If you’re creating content for Netflix, Amazon, or HBO, you should know their aspect ratios. That way you’ll know how your work is presented on the screen. 

Netflix Aspect Ratio 

Netflix shows almost everything in 16×9. So if you’re trying to watch a movie that’s natively in 2.39:1, you’re going to get the black bars. They also have been known to use 2:1 aspect ration. This aspect ratio is also used in many new Netflix series and is less wide than scope, but still gives the viewer the sense of a wide screen. 

Amazon’s aspect ratio is 16×9. 

HBO Aspect Ratios 

HBO’s aspect ratio is 16×9. But some of their older shows, like Curb Your Enthusiasm, can still be shown in 4:3. 

How Aspect Ratio Can Help Your Story 

Okay, we’ve gone through lots of different kinds of aspect ratios, but now it’s time to talk about how aspect ratio can help your story. 

Think about how Christopher Nolan used IMAX and 70mm to give Dunkirk the largest aspect ratio possible. 


Making Dunkirk huge wasn’t just to drive people to the theater. It was to envelop audiences in the heat of battle, to make them feel the pressure of these men, and to give the entire story scope. 

Or what about Paul Schrader’s choice to use Academy Ratio, 1.37:1 for First Reformed?

Squeezing that movie into a more boxy proportion makes you feel the claustrophobia of the world we’re in. We’re under pressure and going through our passion with Reverend Toller. It also gives the movie a more classical feel. It’s a throwback, like the church, and an homage to Hollywood of yesteryear. 

Your aspect ratio is not just a mathematical tool. It’s also a way to enter your story and add another layer. So think about it before you start shooting.  

What’s an Aspect Ratio Calculator?

Let’s say you have a video you shot, or a movie trailer, or even a digital series you want to debut across different channels. An aspect ratio calculator will help you do the math to see how it can fit in other formats. Aspect ratio calculators came in handy for anyone who had to post-convert a TV show made before the 2000s and put them in widescreen. 

Or what if you shot in IMAX, but are showing your project on a standard screen? Like some did for The Force Awakens. 

Image via Making Star Wars Image via Making Star Wars

Try this aspect ratio calculator by Digital Rebellion. 

Try this aspect ratio calculator by Red Route. 

Try this aspect ratio calculator by Ratio Calculator. 

Summing Up Aspect Ratio 

Aspect ratios in film and television have changed over the years, but the one thing that stays consistent is people’s desire to create and show their work in the proper format. So if you’re making movies, shorts, commercials, TV shows, or just shooting with friends, make sure you know the aspect ratio where you’re going to upload or project. 

We even have some free aspect ratio templates for you to use. 

On the technical side, make sure you know your lenses. They can help you decide what to shoot and how to shoot it. 

If you want to learn the storytelling first, check out our Screenwriting page. The first step in getting your aspect ratio to work for you is to get the story down on the page. 

Adjusting Aspect Ratio

The type of aspect ratio you end up with depends on the cameras you used to shoot. Some are permanently set to shoot in a certain aspect ratio, but some give you the option to choose which format you prefer. Due to the differences in the in the media formats and on the display technology, manufacturers have made it possible to adjust the aspect ratio.

When you adjust the aspect ratio on your TV screen or computer monitor, there are two outcomes you can get. One is to get horizontal «black bars or pillar boxes» if the content is wider than the screen. Second, you can get vertical «black bars» if the content is taller than the screen.

To get rid of the black boxes, you can either opt to crop the picture thereby removing some details or stretch it and distort it. Only when you play media with the same aspect ratio as the screen can you get a perfect image.

[edit] aspect ratio

While the diagonal number is a convenient number to use for display size the important screen size is actually the area of the screen which determines the total number of letters and thus words that can appear on the page. The area is related to the diagonal size by the aspect ratio. This is a term that describes the relationship of the height of the display to the width of the display. For example a 5″ screen that was 4″ high and 3″ wide would have a ratio of 4:3 or sometimes represented by dividing the smaller number into the larger as 1.33:1. The area of such a screen would be 12 square inches. A narrower screen would have a less reading area. For example a 5″ screen with a ratio of 16:9 would be 4.35″ high and 2.45″ wide and have a reading area of only 10.6 square inches. Some PDAs and cell phones use a ratio of 3:2 on small pocket size devices although 4:3 is also popular.

Occasionally someone will want to fill the screen with an image by zooming it up or allowing it to be resized and wonder why there are spaces at the top and bottom or on the sides. This is caused by trying to display an image that has a different aspect ratio than the one your screen has. You need to remake the image with the correct aspect ratio or allow it to be distorted. Note that the aspect ration for an image must take into account any extraneous data that may be on the screen such as a title bar so the image may need to have a different aspect ratio than the screen itself.

The electronic displays have tended toward wider (taller) ratios which makes them less suitable to fit standard paper page size on the screen. This is particularly important for PDF books which are targeted at mimicking paper. See Paper sizes.

Comparing devices with a different aspect ratio can be difficult. The Area, the MP, and the PPI numbers can be useful to make these comparisons. For a given screen size a square screen would have the largest area while the more elongated the smaller the area will be. Area is directly related to the number of words that will fit on the screen for reading. Since the ratio is often shown with a different denominator, for example 3 (4:3) or 9 (16:9) you might want to show the ratio using a fixed value. Simply divide the height by the width to get the actual ratio. For a 4:3 display we have 1.333:1. Then multiply by the number you want to compare, for example 9, and you get 12:9.

Summing Up Aspect Ratio

Aspect ratios in film and television have changed over the years, but the one thing that stays consistent is people’s desire to create and show their work in the proper format. So if you’re making movies, shorts, commercials, TV shows, or just shooting with friends, make sure you know the aspect ratio where you’re going to upload or project. 

We even have some free aspect ratio templates for you to use. 

On the technical side, make sure you know your lenses. They can help you decide what to shoot and how to shoot it. 

If you want to learn the storytelling first, check out our Screenwriting page. The first step in getting your aspect ratio to work for you is to get the story down on the page. 

I can’t wait to see how you utilize your aspect ratio knowledge!  

The Most Common Aspect Ratios

Below are the most common aspect ratios you will find today in photography:

  • 1:1 (1.00) – Some medium format film cameras offered 1:1 aspect ratio. However, none of the modern digital cameras have square sensors, and only some cameras offer 1:1 as an option in the menu. Instagram made 1:1 popular by forcing it on every photo initially, but the platform has been changed to accommodate different aspect ratios. 1:1 is a relatively common for printing square images.
  • 5:4 (1.25) – The 5:4 aspect ratio is quite common in large and medium format film cameras, as well as when printing 8″x10″ and 16″x20″ images.
  • 3:2 (1.50) – Most DSLR, mirrorless and point-and-shoot cameras have 3:2 sensors, no matter what sensor size. The 3:2 aspect ratio was popularized by 35mm film and it is the most common one in photography today.
  • 4:3 (1.33) – Medium format, Micro Four Thirds, most smartphones and some point-and-shoot cameras have 4:3 sensors.
  • 16:9 (1.78) – The most common video format today. Not a common format in photography, but some cameras provide it as a cropping option.
  • 3:1 (3.0) – Commonly used for panoramic prints.

A panorama of the Dead Horse Point in Utah, with an approximate 3:1 aspect ratioHasselblad X1D @ 45mm, ISO 100, 1/125, f/5.6

Литература

Иофис, Е. А. Фотокинотехника / И. Ю. Шебалин. — М. : Советская энциклопедия, 1981. — С. 422. — 447 с.

Е. А. Иофис. Глава II. Оценка свойств киноплёнок // Киноплёнки и их обработка / В. С. Богатова. — М.,: «Искусство», 1964. — С. 24—68. — 300 с.

Е. М. Голдовский. Основы кинотехники / Л. О. Эйсымонт. — М.,: «Искусство», 1965. — 636 с.

Голдовский Е. М. От немого кино к панорамному / Н. Б. Прокофьева. — М.,: Издательство Академии наук СССР, 1961. — 149 с.

Б. Н. Коноплёв. Глава II. Классификация кинофильмов // Основы фильмопроизводства / В. С. Богатова. — 2-е изд.. — М.: «Искусство», 1975. — 448 с. — 5000 экз.

И. Б. Гордийчук, В. Г. Пелль. Раздел I. Системы кинематографа // Справочник кинооператора / Н. Н. Жердецкая. — М.,: «Искусство», 1979. — С. 7—67. — 440 с.

Типы и форматы киноплёнки // The Essential Reference Guide for Filmmakers = Краткий справочник кинематографиста. — Rochester: Eastman Kodak, 2007. — С. 35—48. — 214 с.

How Aspect Ratio Can Help Your Story

Okay, we’ve gone through lots of different kinds of aspect ratios, but now it’s time to talk about how aspect ratio can help your story. 

Think about how Christopher Nolan used IMAX and 70mm to give Dunkirk the largest aspect ratio possible. 

Making Dunkirk huge wasn’t just to drive people to the theater. It was to envelop audiences in the heat of battle, to make them feel the pressure of these men, and to give the entire story scope. 

Or what about Paul Schrader’s choice to use Academy Ratio, 1.37:1 for First Reformed?

Squeezing that movie into a more boxy proportion makes you feel the claustrophobia of the world we’re in. We’re under pressure and going through our passion with Reverend Toller. It also gives the movie a more classical feel. It’s a throwback, like the church, and an homage to Hollywood of yesteryear. 

Your aspect ratio is not just a mathematical tool. It’s also a way to enter your story and add another layer. So think about it before you start shooting.  

Native vs Choosing in Camera

As I have already mentioned earlier, the aspect ratio is often determined by the camera’s image sensor, which is its “native aspect ratio”. Some cameras, however, provide the ability to choose different aspect ratios to photographers.

For example, the Nikon Z7 allows choosing between the following:

  • FX (36×24)
  • DX (24×16)
  • 5:4 (30×24)
  • 1:1 (24×24)
  • 16:9 (36×20)

Note that the first two options are both 3:2 (FX 36×24 and DX 24×16), because it is the native aspect ratio of the sensor on this camera (the second option is provided to crop the center part of the image to simulate Nikon’s APS-C / DX camera sensors). All other options, such as 5:4, 1:1 and 16:9 are not native to the camera, which means that choosing any of them will result in cropping part of the image.

Hagia Sophia, captured in camera’s native aspect ratio of 3:2NIKON Z 7 + NIKKOR Z 24-70mm f/4 S @ 70mm, ISO 64, 1/6, f/5.6


While doing this reduces image resolution and file size, it is often not a good idea to switch to non-native aspect ratios. First of all, you are throwing away pixels that you will never be able to get back. So if you crop an image and decide to go back and change to a different aspect ratio, you will have to either retake the shot, or potentially lose resolution due to additional cropping that will have to take place. If you shoot in native aspect ratio, you will have the ability to change it during the post-processing step later, with minimal loss of resolution.

I can only think of two real reasons why one would want to change from the native aspect ratio. The first reason has to do with framing – if you want to prevent accidentally cutting into your subject, then switching to the aspect ratio that you will use for displaying or printing your image might be beneficial. The second reason has to do with the camera buffer and continuous shooting speed – some cameras are able to shoot longer due to storing smaller files in the camera buffer.

Total Solar Eclipse, captured in 4:3 native aspect ratioFujifilm GFX 50S + GF23mmF4 R LM WR @ 23mm, ISO 100, 10 sec, f/11.0

In the earlier example with the DJI Mavic Pro drone, I switched to 16:9 on the camera to test it out and completely forgot about it, which resulted in many of my shots being cropped to the aspect ratio I prefer the least.

If you want to maximize the resolution of your images, always shoot in the native aspect ratio of your camera’s sensor. However, if you have specific requirements (such as your client demanding that you produce images at specific aspect ratio), then cropping in camera will be a safer option in terms of framing and composition.

Aspect Ratio History

Aspect ratios have changed over time, depending on what people use to view media. As screens got bigger, aspect ratio adjusted. As they got smaller, it continued to happen. Over 100 years ago, the very first films were projected in 4:3. The standard film strip was run through a projector and light behind it through the image onto a wall. The 4:3, or 1.33:1, was the literal measurement of the strip. 

As film evolved, so did the aspect ratio. Film strips eventually became 1.37:1, and that became the standard for cinema across the globe. 

1.37:1 was the ratio officially approved by the Academy of Motion Picture Arts and Sciences in 1932. They made it the standard and people started calling it the Academy Ratio.

In the 1950s, TV became ever more popular. People started going to the theater less, and theatrical distributors knew they needed to make a change. So they went even bigger, with Cinerama. 

Credit: Wikimedia

Common Aspect Ratios

Since the concept first started being used in the early 20th century, many aspects ratios have risen and fallen in popularity. Nowadays, the most widely used are 21:9, 16:9 and 4:3.

The 4:3 aspect ratio is what you would typically find on old generation TVs while the more modern digital TVs normally have the 16:9 aspect ratio. Due to its length, the 16:9 aspect ratio is popularly known as the widescreen aspect ratio.

Interestingly, the television industry normally uses a different aspect ratio from the film industry. Most television shows are normally displayed in the 16:9 aspect ratio while movies in theatres are displayed using the 21:9 aspect ratio. The 21:9 ratio is called the cinema standard due to its popularity in the theatre industry.

Of course, there are other aspects ratios in use today, though some are not as common. For example, IMAX uses its own unique ratios, typically 14:10 or 19:10. Digital cameras also have different aspect ratios as still photographs are different from motion pictures.

Most common aspect ratios:

Aspect Ratio Users TVs
4:3 (1.33:1) Standard Channels Old TVs
16:9 (1.77:1) HD Channels Most TVs today
21:9 (2.35:1) Most movies Most theaters today
14:10 (1.4:1) IMAX Film Very few theaters
19:10 (1.9:1) IMAX Digital Most IMAX theaters

Applications and uses

The term is most commonly used with reference to:

  • Graphic / image
    • Image aspect ratio
    • Display aspect ratio
    • Paper size
    • Standard photographic print sizes
    • Motion picture film formats
    • Standard ad size
    • Pixel aspect ratio
    • Photolithography: the aspect ratio of an etched, or deposited structure is the ratio of the height of its vertical side wall to its width.
  • HARMST High Aspect Ratios allow the construction of tall microstructures without slant
  • Tire code
  • Tire sizing
  • Turbocharger impeller sizing
  • Wing aspect ratio of an aircraft or bird
  • Astigmatism of an optical lens
  • Nanorod dimensions
  • Shape factor (image analysis and microscopy)

Using Aspect Ratio in Modern Design

Modern web design requires designers to pay special attention to PAR, resolution, image crops, and how to use object-fit CSS to manipulate visual elements. Each directly relates to aspect ratio in some way. In this section, we’ll go into more detail on how and why you need to be conscious of it in your designs.

1. Pay Attention to PAR and Resolution

PAR affects your image and video clarity, while resolution affects the details. Best practices recommend always using square, 1:1, PAR. Wider screens may distort the shape or clarity when an image has non-square pixels.

Be mindful of the PAR when using video editing software or using video clips that may not have the same PAR. Also consider the PAR when applying special effects.

2. Crop Images Carefully

When designing, consider the various ways it’s going to get cropped. As a good rule of thumb, create a focal point at the center of your design. Keep all of the important details in this area. That way, when it’s time to crop, it will remain in the safe zone.

source

For example, if you have an image of a surfer, center the top of the wave and the surfer before cropping the image.

source

Unfortunately, some images can’t handle cropping without losing important details. As an alternative, you can also use a white or gray letterbox to change the aspect ratio.

source)

Do you want the most important part of your design to get lost? Of course not! Stay aware of the various ways it’ll get cropped up in its journey through the web.

Even more simply, keep the important stuff near the center.

3. Use CSS Tags to Control Ratios

CSS tags tell images how to behave. The tag preserves the aspect ratio of the image by automatically adding letterboxing filler on the edges that do not fit the provided aspect ratio of the image element.

source

also allows the values, , and (in Opera).

changes the aspect ratio based on the values set.

maintains the original aspect ratio but changes the width and height of an image.

This level of control enables designers to consider their work from multiple angles. It’s often a challenge, especially in the beginning. However, the more you practice, the more you see how empowering it is to design with multiple iterations in mind.

Меню

Панель значковЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полной страницыВверх НавигацияОтзывчивый TopnavПанель поискаИсправлена ​​боковая панельБоковая навигацияПолноэкранная навигацияМеню Off-CanvasНаведение с помощью кнопокМеню горизонтальной прокруткиВертикальное менюНижняя навигацияОтзывчивый снимок NavСсылки на нижнюю границуСсылки справаЦентрированные ссылки менюИсправлено менюСлайд-шоу в прокруткеСкрыть Navbar в прокруткеПрикрепленное NavbarВыпадающие окна HoverНажмите «Раскрывающиеся окна»Раскрытие в ТопнавеРаспространение в СиденеОткроется панель NavbarDropupMega MenuпагинацияПанировочные сухариГруппа кнопокГруппа вертикальных кнопокВажная социальная панельОтзывчивый заголовок


С этим читают