Resize SVG image on text over it-CodePudding

I would like to place a title over a SVG image and center them in a bootstrap 5 row.

The "Team" title is positioned centered over the image but when I resize the browser or on mobile screen the title and sub-title resize accordingly but the image is not resized and stay in the original size.

I tried several solutions but I cannot have it to work. Can some help me? Thanks.

.title-with-cloud {
  position: relative;
  text-align: center;
}

.title-with-cloud img {
  width: 10vw; /* added by community */
}

.team-title {
  font-size: 5vw;
  font-weight: bold;
  position: absolute;
  bottom: 24px;
  margin-left: 50%;
  margin-right: -50%;
  transform: translate(-50%, 0%);
}

.team-subtitle {
  font-size: 2vw;
  font-weight: 400;
  margin-bottom: 2.5em;
}

<div >
  <div >
    <div >
      <img  src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/caution.svg"></img>
      <h1 >Team</h1>
    </div>

    <p >Some text...............</p>
  </div>
</div>

CodePudding user response：

The usual approach to centering absolutely-positioned elements is to start them at 50% left and top and then shift them back half of their size. This keeps the element centered regardless of the parent's size.

Notice that I've substituted Bootstrap classes for some of your CSS. I've also added a container element to eliminate horizontal scroll.

.team-title {
  font-size: 5vw;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.team-subtitle {
  font-size: 2vw;
  font-weight: 400;
  margin-bottom: 2.5em;
}

.title-with-cloud img {
  width: 30vw; /* added by community */
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <img  src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/caution.svg"></img>
        <h1 >Team</h1>
      </div>

      <p >Some text...............</p>
    </div>
  </div>
</div>