CODEWITHSUNDEEP
htmlcssreactjscard
Emanuele
Emanuele

Reputation: 2384

How to properly fit an image into a div in HTML and CSS using ReactJS

I am about to finish a small database of images of vessels. As you can see from the screenshot below, the problem I have is that the cards are all different sizes despite I fix the css classes to a specific width. I am trying to have all the card of same width and height. What am I doing wrong?

card-img

Below the snippet of code related to this problem:

vessels.js

export default function Vessel({ vessel }) {
    const { name, slug, images /* size */ } = vessel;

    return (
        <div>
        <article className="room">
            <div className="img-container">
                <img src={images[0] || defaultImg} alt="single" />
                <Link to={`/vessels/${slug}`} className="btn-primary">
                    Features
                </Link>
            </div>
        </article>
        </div>
    );
}

And the related App.css classes:

.room {
    display: block;
    box-shadow: var(--lightShadow);
    transition: var(--mainTransition);
}    
.img-container {
    position: relative;
}
.img-container img {
    width: 100%;
    display: block;
    transition: var(--mainTransition);
}

What I have done so far:

  1. I have been trying to research and figure out the problem of why that is happening but couldn't understand what I am doing wrong. I consulted this source which seems to be pretty clear. I apply and the result I have is the one on the image I posted.

  2. I tried also to add the height property on the css but that didn't change the problem

    .img-container img { width: 100%; height: 100%; display: block; transition: var(--mainTransition); }

  3. At a certain point I suspected it was a probelm of visibility but that also didn't change the issue I have. And I think it is not a problem of visibility property.

It seems to me that there is a (probable?) property that could be overwritten? Or maybe that is not the problem. Thanks for pointing to the right direction on how to solve this issue.

Upvotes: 0

Views: 465

Answers (1)

Harley Lang
Harley Lang

Reputation: 2333

Try using flexbox and styled components for your desired design.

Example:

import React from "react";
import styled from "styled-components";
import "./styles.css";

const BoatContainer = styled.div`
  display: flex;
  flex-flow: row wrap;
`;

const BoatImg = styled.img`
  width: 200px;
  margin: 5px;
`;

export default function App() {
  return (
    <div className="App">
      <h1>Behold: boats.</h1>
      <BoatContainer>
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Motorboat_at_Kankaria_lake.JPG/1920px-Motorboat_at_Kankaria_lake.JPG" />
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Boats_at_Bhimili_beach_in_Visakhapatnam.jpg/1280px-Boats_at_Bhimili_beach_in_Visakhapatnam.jpg" />
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Motorboat_at_Kankaria_lake.JPG/1920px-Motorboat_at_Kankaria_lake.JPG" />
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Boats_at_Bhimili_beach_in_Visakhapatnam.jpg/1280px-Boats_at_Bhimili_beach_in_Visakhapatnam.jpg" />
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Motorboat_at_Kankaria_lake.JPG/1920px-Motorboat_at_Kankaria_lake.JPG" />
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Boats_at_Bhimili_beach_in_Visakhapatnam.jpg/1280px-Boats_at_Bhimili_beach_in_Visakhapatnam.jpg" />
      </BoatContainer>
    </div>
  );
}

Sandbox demo: https://codesandbox.io/s/stack-63731876-boats-e7onm

Here's a handy CSS Tricks guide to flexbox for reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Related Questions