CSS layout has grown and evolved into a robust set of tools to accomplish some fantastic modern layouts.
The problem is that we are still teaching CSS as something that is" hacked" together by using" tricks" to get our desired web layouts.
Learning CSS like this typically leads us down one of two paths: We either build fragile page layouts using 
the "see what sticks" method of CSS, or we give up and declare that CSS is too tricky and bring in an X column grid system like Twitter Bootstrap.

Creating page layouts in CSS doesn't have to be complicated. Like how you make much of your everyday speech using just a small 
subset of vocabulary composed together, you can achieve sophisticated layouts by composing simple low-level layout primitives in unique ways.

In this course, you will learn foundational layout primitives that you can use to build many of your more complex layouts. You will also learn 
how to apply the principle of "Encapsulated CSS" to both extend these primitives as well as to create custom layout primitives. To do this, we 
will recreate many of the layouts found in the wild using the principles mentioned above.

This course does not require extensive knowledge of CSS. It does assume that you have a basic understanding of the CSS box model, CSS specificity, 
CSS selectors, and CSS sizing units. Though you can apply the principles in this course to any modern web framework, including no framework 
development, this course will be using React and assume you have a basic understanding of React, JSX, and React hooks.

Composing Layout in React is for both novice and experienced developers who want to take their layout skills to the next level. This course will 
teach you the practical skills you need to build modern layouts for the web without depending on heavy CSS frameworks. Unlike courses and blog 
posts that teach each layout property in isolation, our product teaches practical layout patterns that you can use every day when solving your 
layout challenges.

In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives.
Along the way you will learn modern CSS Layout tools like Normal Flow, Flexbox, and Grid.

Composing Layouts in React

---
title: Resize Images And Maintain Aspect Ratio in React and CSS
slug: frame-component
description: In this lesson, we will build the Frame primitive, which frames out a visual media, like an image or video,  and forces it into the aspect ratio needed for the design without distorting the image.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/8eyyrj0u3h
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_04/lesson_03
---

Images on the web are surprisingly tricky. A whole course could be devoted to best practices for images on the web, but from a layout point of view, one of the more difficult parts to deal with is the size and aspect ratio. The images we use are rarely the same size and aspect ratio as our web page's design. This problem is compounded by the need to support multiple viewports that our image will need to load. We typically deal with the size issue by making the image size responsive - we can set the `max-width` of the image to `100%`, which we did in our CSS Reset.

However, dealing with aspect ratios is not as simple. Images have an intrinsic aspect ratio based on the actual width and height of the image file. If we try to force the image into a box of a different aspect ratio, then the image becomes skewed and deformed.

We need a way to not just control the size, but also the aspect ratio, by cropping the image where it is too tall or too wide for the aspect ratio we need.

In this lesson, we will build the Frame primitive, which frames out a visual media, like an image or video, and forces it into the aspect ratio needed for the design, without distorting the image.

## The problem: the New Arrivals

In this lesson, we are going to build a "New Arrivals" card, like this:

![New arrivals red-line](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.03/public/assets/frame-red-line.png)

In the above widget, the image is cropped at a 1:1 aspect ratio, or in other words, a square. It also needs to be responsive to the size of the parent container by growing or shrinking accordingly.

## The solution

Here is how our code starts out. [You can follow along at the starter project over at codesandbox.io](https://codesandbox.io/s/new-arrivals-forked-nmugp?file=/src/NewArrivals.jsx):

```jsx { actualFilename=./protected/frame-0.js endLine=15 startLine=8 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.03/protected/frame-0.js#L8 }
function NewArrivals() {
  return (
    <div>
      <img src={shirt} alt="" />
      <Details>Ella Blouse - $35.99</Details>
    </div>
  );
}
```

And this is how it looks:

![New arrivals step-0](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.03/public/assets/frame-0.png)

So let's start building our Frame primitive:

```jsx { actualFilename=./protected/frame-1.js endLine=24 startLine=9 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.03/protected/frame-1.js#L9 }
const Frame = styled.div`
  position: relative;

  width: 18rem;
  height: 18rem;

  > * {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
```

It may seem like a lot is going on here, but it isn't. First, we are setting the Frame primitive to have a `relative` position and setting the width and height to `18rem`. These settings will give us an `18rem` by `18rem` square box.

Next, we are selecting all the direct children, setting the position to be `absolute`, and setting the `top`, `bottom`, `left`, and `right` properties to 0. Zero is one of those unique values in CSS that you never have to give the unit of. That is because zero of any unit, be it `rem`, `px`, or `vw`, will always still be zero. The value you set to each of these properties is how much you want to offset from the `top` or `bottom`, for example. By setting these properties to zero, we are effectively pinning the children to the outer div element, ensuring the child will be the same size as the outer div that is wrapping the image. Then we are setting the `width` and `height` to be `100%` to force any media object to fit in the box.

Now we just need to wrap our `img` tag with our Frame primitive, like this:

```jsx { actualFilename=./protected/frame-1.js endLine=36 startLine=27 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.03/protected/frame-1.js#L27 }
function NewArrivals() {
  return (
    <div>
      <Frame>
        <img src={shirt} alt="" />
      </Frame>
      <Details>Ella Blouse - $35.99</Details>
    </div>
  );
}
```

And our New Arrivals component looks like this:

![New arrivals step-1](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.03/public/assets/frame-1.png)

In this lesson, we will build the Frame primitive, which frames out a visual media, like an image or video,  and forces it into the aspect ratio needed for the design without distorting the image.