I want them to all fit inside the boxes with the border but I don't want them to appear stretched. how can I do this?

I have tried giving them a fixed height, width inside a div etc but they always appear to not look quite right

<CategoryContainer>
    <CategoryLink to={`${category.name.toLowerCase()}`}>
        <CategoryImage>
            <Image image={category.products[0].image} />
        </CategoryImage>
        <CategoryName>
            {`${category.name}`}
        </CategoryName>
    </CategoryLink>
</CategoryContainer>

and my styled ponents is:

export const Container = styled.div`
  display: flex;
  width: 1000px;
`;

export const CategoryContainer = styled.div`
  height: 300px;
  width: 33%;
  margin-right: 10px;
  position: relative;
  border: 1px solid black;
`;

export const CategoryLink = styled(Link)`
  text-decoration: none;
  color: black;
  z-index: 5;
  position: absolute;
`;

export const CategoryImage = styled.div`
`

export const CategoryName = styled.div`

`

I want them to all fit inside the boxes with the border but I don't want them to appear stretched. how can I do this?

I have tried giving them a fixed height, width inside a div etc but they always appear to not look quite right

<CategoryContainer>
    <CategoryLink to={`${category.name.toLowerCase()}`}>
        <CategoryImage>
            <Image image={category.products[0].image} />
        </CategoryImage>
        <CategoryName>
            {`${category.name}`}
        </CategoryName>
    </CategoryLink>
</CategoryContainer>

and my styled ponents is:

export const Container = styled.div`
  display: flex;
  width: 1000px;
`;

export const CategoryContainer = styled.div`
  height: 300px;
  width: 33%;
  margin-right: 10px;
  position: relative;
  border: 1px solid black;
`;

export const CategoryLink = styled(Link)`
  text-decoration: none;
  color: black;
  z-index: 5;
  position: absolute;
`;

export const CategoryImage = styled.div`
`

export const CategoryName = styled.div`

`

• javascript
• html
• css
• styled-ponents

Share Improve this question Follow edited Jan 3, 2018 at 19:07 Iman Bahrampour 6,80022 gold badges4545 silver badges6565 bronze badges asked Jan 3, 2018 at 17:11 The WalrusThe Walrus 1,20877 gold badges3131 silver badges5050 bronze badges 5

• 2 Please include the rendered HTML & CSS ... – DaniP Commented Jan 3, 2018 at 17:13
• max-height: 100%; max-width: 100%; should work in most browsers, I remember that potentially causing a patibility issue somewhere (I think it was safari) but it was a few years ago and may be ironed out by now. You need to not set an explicit height or width though, because that will cause it to skew. Just the two max properties and nothing else. – jmcgriz Commented Jan 3, 2018 at 17:25
• @jmcgriz max-width: 100%; max-height: 100%; width: auto; will be sufficient I believe. – Deepak Kamat Commented Jan 3, 2018 at 18:13
• @DeepakKamat but which ponent above do I apply these to? – The Walrus Commented Jan 4, 2018 at 10:16
• The image, the img tags inside of the whichever container you are putting them. – Deepak Kamat Commented Jan 4, 2018 at 15:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

A fairly simple idea is to keep the width relative to the height. Generally most responsive images' height is controlled by its width by setting height: auto and width: 100%, we can just reverse this since in your case the height is variable.

.the-images {
  /* This is where magic happens */
  max-width: 100%;
  height: 100%;
  width: auto;

  display: block;
  margin: 0 auto;
}

Or to maintain aspect ratio if the boxes are fluid in width, you can do this

.the-images {

  /* This is where magic happens */
  max-width: 100%;
  max-height: 100%;
  width: auto;

  display: block;
  margin: 0 auto;
}

A live example:

http://jsbin./vuduvev/edit?css,output

If setting the image as a background is an option: https://css-tricks./almanac/properties/b/background-size/

If not, use object-fit: https://css-tricks./almanac/properties/o/object-fit/