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
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;
}
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
The image shrinks while you resize the screen
Cowwy
October 17, 2019, 5:55pm
5
What exactly are you trying to do?
Putting the image on the left with h2 on the right?
yes but it’s supposed to be 75px x 75px when large
not filling the whole screen as it is now
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;
}
I will show u into slack
explaining not my best thing…
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;
thanks for the trying to help it is appreciated :3 but cowwy already gave me the sollution