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

Html – How to make text and img in a div the same size

I am trying to create a div that contains an img and a text over the img. The text will be with different size depending on the case, so I want to automatically adjust the width of the img to cover the text.
What I tried so far is this:

/* Container holding the image and the text */

.cartContainer {
  width: max-content;
  position: relative;
  text-align: center;
  display: inline-block;
  margin: 0;
}


/* Centered text */

.cartTextCentered {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
}

.cartImg {
  max-height: 1.5rem;
  display: block;
  transform: translate(0, 0.1em);
  width: fit-content;
}
<div class="cartContainer">
  <img class="cartImg" src="imagePath">
  <div class="cartTextCentered">
    This is my text.
  </div>
</div>

I would greatly appreciate anyhelp on the topic.

Revised:
This is what I want to achieve:
enter image description here

And this is if I use background-image:
enter image description here

Tags:

2

Answers


  1. 0

    You can achieve dynamic font sizing based on container width using vw units (viewport width) or other relative units in combination with media queries or CSS calculations.

    <div class="cartContainer">
    <div class="cartTextWrapper">
        <div class="cartTextCentered">This is my text.</div>
        <img class="cartImg" src="/imagePath.jpg" alt="Image description">
    </div>
</div>

<style>
    /* Container holding the image and the text */
    .cartContainer {
        position: relative;
        display: inline-block;
    }

    /* Wrapper for text and image to ensure correct sizing */
    .cartTextWrapper {
        position: relative;
        display: inline-block;
    }

    /* Centered text */
    .cartTextCentered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
        font-size: calc(1vw + 1rem); /* Example dynamic font-size */
        padding: 0.2em; /* Adjust padding for readability */
    }

    /* Image styling */
    .cartImg {
        display: block;
        max-width: 100%; /* Ensures image doesn't exceed container width */
        height: auto; /* Allows image to maintain aspect ratio */
    }
</style>
    Login or Signup to reply.
  2. 0

    you can turn cartContainer into Flex container with flex-direction set to column and define it’s block size, after you can give each child flex:1; which will cause each of them to shrink and grow equally and take up same amount of space vertically. Besides instead of using width and height I have replaced them with more robust inline-size and block-size properties. Hope this solves your problem.

    *{
  margin:0px;
  padding:0px;
  box-sizing:border-box;
} /* removing above code doesn't change behaviour */

/* Container holding the image and the text */
.cartContainer {
  display: flex;
  flex-direction:column;
  align-items: stretch;
  inline-size:max-content;
  block-size: 20rem; /* Ensures height is between min-content and 20rem */
  border:0.5rem solid tomato;
}

.cartImg {
  display:block;
  flex: 1; /* Ensures the image takes up equal space in the container */
  inline-size: 100%;
  object-fit: cover;
}

.cartTextCentered {
  flex: 1; /* Ensures the text container takes up equal space in the container */
  text-align:center;
}
    <div class="cartContainer">
  <img class="cartImg" src="https://via.assets.so/img.jpg?w=400&h=150&tc=blue&bg=#cecece">
  <div class="cartTextCentered">
    <p>This is my text.</p>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search