CODEWITHSUNDEEP
htmlcssreactjs
user9745220
user9745220

Reputation: 253

HTML CSS: How to prevent image distortion with responsiveness?

I'm creating a site on which users are able to post various ads. Every ad should have a title, description, image and etc. The most important thing is the image, the image represents all the ads in the UI. For now, I'm using a grid system, but I didn't really paid attention to the grid sizes for phones, tablets and etc. which is really important.

enter image description here

These are the original sizes of the photos, as you can see they are pretty different, is there any better way to handle the responsiveness and prevent distortion?

enter image description here

This is how React renders ads:

<AdContainer>
      {AdsList.map((ad: AdI) => (
        <AdWrapper>
          <AdPhotoWrapper>
            <AdPhoto src={ad.description}></AdPhoto>
          </AdPhotoWrapper>
          <AdInformation>
            <AdTitle>{ad.title}</AdTitle>
            <AdLocationWrapper>
              <AdLocation>
                <AdCountry>{ad.country} </AdCountry>
                <AdCity>{ad.city}</AdCity>
              </AdLocation>
            </AdLocationWrapper>
            <AdPriceWrapper>
              <AdPrice>
                <AdPriceCurrency>{ad.currency}</AdPriceCurrency>
                <AdPriceSum>{ad.price}</AdPriceSum>
              </AdPrice>
            </AdPriceWrapper>
          </AdInformation>
        </AdWrapper>
      ))}
</AdContainer>

Styles:

const AdContainer = styled.div`
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr;
  padding: 1rem 2rem 0 2rem;
`;

const AdPhotoWrapper = styled.div`
  max-width: 100%;
  height: 100%; // To avoid the image distortion
  border-radius: 10px;
  margin-bottom: 0.6rem;
`;

const AdPhoto = styled.img`
  max-width: 100%;
  height: 100%; // To avoid the image distortion
`;

const AdTitle = styled.h3`
  margin: 0;
  letter-spacing: 2px;
  color: ${colors.whitePrimary};
`;
const AdLocationWrapper = styled.div`
  display: flex;
  margin: 0;
  margin-top: -0.25rem;
`;
const AdLocation = styled.p`
  margin: 0;
  color: ${colors.grayThird};
`;
const AdCountry = styled.span``;
const AdCity = styled.span``;
const AdInformation = styled.div`
  display: flex;
  flex-direction: column;
`;

const AdPriceWrapper = styled.div`
  display: flex;
  margin-top: -0.4rem;
`;
const AdPrice = styled.h2`
  margin: 0;
  padding-top: 0.5rem;
  color: ${colors.whitePrimary};
`;
const AdPriceCurrency = styled.span`
  padding-right: 0.3rem;
`;
const AdPriceSum = styled.span``;

Upvotes: 0

Views: 2095

Answers (1)

A Haworth
A Haworth

Reputation: 36457

To ensure the user's image can all be seen OK try this:

const AdPhoto = styled.img`
  width: 100%;
  height: 100%;
  object-fit: contain;
`;

(Note: don't try aspect-ratio just yet as it's only just coming into being supported on Safari so a lot of users still won't be able to use it).

Upvotes: 2

Related Questions