I need my img to be responsive with text bellow it

HTML-CSS
#1 
img {
  position: absolute;
  right: 13px;
  width: 70px;
  border: 3px solid navy;
  padding: 10px;
  top: 0px;
  opacity: 0,4;
}

    <img id="bunny_pic "src="https://i655.photobucket.com/albums/uu271/photo-oosh/PETS%20AND%20BUGS/BUNNY001.png"width="75" height="75" opacity="0,3" alt="bunny">

i tried add ing the h2 next to img but that did’t solve it
and then i tried placing it bellow it but it acted like a magnet with both + sides

I tried setting adding one of the next 2 lines it did make it responcive but did also give a super large img

  width: 100%;
  height: auto;

what i need is the img going smaller when size down not conquere the entire text

#2

Hey Kittykora!
Try this:

On HTML

<h2>Lorem ipsum</h2> 
<!-- nest the img element inside a figure element -->
<figure>
      <img id="bunny_pic "src="https://i655.photobucket.com/albums/uu271/photo-oosh/PETS%20AND%20BUGS/BUNNY001.png"width="75" height="75" opacity="0,3" alt="bunny">
</figure>

on CSS

figure {
  width: 100%;
}

img {
  min-width: 30%; /* giving the minimum width */
  max-width: 100%; /*giving the maximum width */
  height: auto; 
  display: block; /* make the image block element */
  padding: 10px;
  opacity: 0,4;
}
#3

i tried the code but the image goes to the wrong size now
and stays large
it might be conflicting with another element

you can see for yourself :3

https://codepen.io/maria-hoek/pen/mddrVjJ?editors=1100

#4

The image shrinks while you resize the screen

#5

What exactly are you trying to do?
Putting the image on the left with h2 on the right?

#6

yes but it’s supposed to be 75px x 75px when large
not filling the whole screen as it is now

#7

This to the left

HTML

<div class="container">
     <h2>Title</h2> 
<figure>
      <img id="bunny_pic "src="https://i655.photobucket.com/albums/uu271/photo-oosh/PETS%20AND%20BUGS/BUNNY001.png"width="75" height="75" opacity="0,3" alt="bunny">
</figure>
</div>

CSS

div.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  width: 100%;
}

h2 {
  align-self: center;
}

figure {
  width: 100%;
}


img {
  min-width: 30%;
  max-width: 100%;
  height: auto;
  display: block;
  padding: 10px;
  opacity: 0,4;
}
#8

I will show u into slack
explaining not my best thing…

#9

Okay now i got you.

See-
The natural size of your image is too big: 1,023 by 856

When you use width: 100% on your current image, it will take the whole space.

In these situations, when the image is too big, it is better to resize the image via any image editor, to the natural size that you want.

Now I resize it for you to 75 by 75

Now you can use width: 100%; height: auto; display: block;

:slightly_smiling_face:

#10

thanks for the trying to help it is appreciated :3 but cowwy already gave me the sollution

#11

Aweome :slight_smile:

#12