An image is not adjusting as per the screen. See image **google-play-badge**.\

The **width** & **height** of the image is set to be ***auto***, then also it is not resizing automatically.

[![see image](https://i.stack.imgur.com/Tu97S.jpg)](https://i.stack.imgur.com/Tu97S.jpg)

My Codes:

```css
body {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;
}

p {
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 4px;
  color: white;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

@supports (-webkit-text-fill-color: rgba(45, 45, 45, .05)) {
  p {
    background: linear-gradient(90deg, #000, #000fe6, #000);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3.75s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(45, 45, 45, .05);
  }
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}

svg {
  display: flex;
  font: 10.5em 'Montserrat';
  margin: 0 auto;
}

.text-copy {
  fill: none;
  stroke: white;
  stroke-width: 5px;
  stroke-dashoffset: 0%;
  animation: stroke-offset 5.5s infinite linear;
}

@supports (stroke-dasharray: 6% 29%) {
  .text-copy {
    stroke-dasharray: 6% 29%;
  }
}

.text-copy:nth-child(1) {
  stroke: #4D163D;
  animation-delay: -1;
}

.text-copy:nth-child(2) {
  stroke: #840037;
  animation-delay: -2s;
}

.text-copy:nth-child(3) {
  stroke: #BD0034;
  animation-delay: -3s;
}

.text-copy:nth-child(4) {
  stroke: #BD0034;
  animation-delay: -4s;
}

.text-copy:nth-child(5) {
  stroke: #FDB731;
  animation-delay: -5s;
}

@keyframes stroke-offset {
  100% {
    stroke-dashoffset: -35%;
  }
}

@media screen and (max-width: 600px) {
  p,
  h3,
  img {
    font-size: 20px;
  }
}

</style>
```

```html
<body>
  <div>
    <h3>
      <svg viewBox="0 0 960 300">
 <symbol id="s-text">
  <text text-anchor="middle" x="50%" y="80%">TITLE</text>
 </symbol>

 <g class = "g-ants">
  <use xlink:href="#s-text" class="text-copy"></use>
  <use xlink:href="#s-text" class="text-copy"></use>
  <use xlink:href="#s-text" class="text-copy"></use>
  <use xlink:href="#s-text" class="text-copy"></use>
  <use xlink:href="#s-text" class="text-copy"></use>
 </g>
</svg>
    </h3>
    <p>Some Text Here</p>
    <div><img src="https://i.imgur.com/me74Rfr.png" alt="google-play-badge" width="auto" height="auto" /></div>
  </div>
</body>
```

An image is not adjusting as per the screen. See image-alt **google-play-badge**.

The **width** & **height** of the image is set to be ***auto***, then also it is not resizing automatically.