css Question posted in
Some basic documentation can be found here.

Css – Why image not taking all available space?

I am triying to do a card to showcase services. It only has a image and a little text. Nothing too fancy and not really difficult to achieve…But for some reason that i can’t figure out, the image is not taking the full width and height of the container.

Am i missing something?

This is my code so far:

PS: Images(type) is just a list of possible sources that can be passed through props to the component. Nothing to worry about.

ServiceImage.tsx:

type Props = {
  source: Images;
  title: string;
};

export default function ServiceImage({
  source,
  title,
}: Props) {
  return (
    <div
      className="service-image__container"
    >
      <div className="image-container">
        <img
          src={`/assets/services/${source}`}
          alt={title}
          className={`service-image`}
        />
      </div>
      <p>{title}</p>
    </div>
  )
}

SASS:

.service-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-container {
  position: absolute !important;
  top: -30px;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translateX(-50%);
}

.service-image__container {
  align-items: center;
  justify-content: center;
  background: #FFFFFF; 
  border-radius: 10px; 
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); 
  padding: 10px; 
  width: 150px;
  height: 150px;
  display: flex;
  position: relative;
  text-align: center;

  p {
    font-weight: bold;
    font-size: 14px;
    align-self: flex-end;
  }
}

Image not taking all available space

Container fixed width and height

Thanks beforehand!

Tags:

2

Answers


  1. 0

    the image is not taking the full width and height of the container.

    It is.

    Your .image-container is 100px x 100px.

    According to object-fit: cover, the image is covering that area.

    In the example below, I have changed top: -30px; to top: 0; so you can see the whole of .image-container.

    Working Example:

    .service-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translateX(-50%);
}

.service-image__container {
  align-items: center;
  justify-content: center;
  background: #FFFFFF; 
  border-radius: 10px; 
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); 
  padding: 10px; 
  width: 150px;
  height: 150px;
  display: flex;
  position: relative;
  text-align: center;
}

.service-image__container p {
    font-weight: bold;
    font-size: 14px;
    align-self: flex-end;
}
    <div class="service-image__container">
  <div class="image-container">
    <img src="https://picsum.photos/200/300" alt="" class="service-image" />
  </div>
  <p>Title</p>
</div>
    Login or Signup to reply.
  2. 0

    It is doing the cover but also you don’t need the position stuff if you use a grid.

    Note that place-items: center; is a shortcut to "super-center" in the container.

    I took liberty to set the font to 16px which is many modern browsers default anyway then used em because my brain likes it better as a more modern approach IMHO. I added a body background color just to show what is where a bit.

    I added multiple cards with different image sizes to show it was doing the cover.

    Note I turned your CSS kind of upside down as I like to define my containers first then what fits in them. Same for the class on title so now I can make that element a div or span or whatever I want without changing CSS.

    body {
  font-size: 16px;
  margin: 0;
  padding: 1em;
  box-sizing: border-box;
  background-color: #ffff0060;
  display: grid;
  grid-auto-flow: column;
  place-items: center;
}

body * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.service-image__container {
  display: grid;
  place-items: center;
  background-color: #FFFFFF;
  border-radius: 0.625em box-shadow: 0px 0.25em 0.625em rgba(0, 0, 0, 0.1);
  padding: 0.625em;
  width: 9.375em;
  height: 9.375em;
}

.image-container {
  display: grid;
  place-items: center;
  height: 6.25em;
  width: 6.25em;
}

.service-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.service-image__container .title {
  font-weight: bold;
  font-size: 0.875em;
}
    <div class="service-image__container">
  <div class="image-container">
    <img src="https://picsum.photos/50/50" alt="" class="service-image" />
  </div>
  <p class="title">Title</p>
</div>
<div class="service-image__container">
  <div class="image-container">
    <img src="https://picsum.photos/200/200" alt="pic" class="service-image" />
  </div>
  <p class="title">Title</p>
</div>
<div class="service-image__container">
  <div class="image-container">
    <img src="https://picsum.photos/200/100" alt="" class="service-image" />
  </div>
  <p class="title">Title bigger</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search