how do I make my image fit in properly?

Question

I was working on a template, then I got stuck somewhere, some of my images overflows the container, I want to make it align properly within the container and grow with the container.

Answer 1

Check this out https://code.sololearn.com/WGn5ExH38lKp/?ref=app

Answer 2

Lucky Chu please provide your code so we, the community, can assist you further.

Thanks and happy coding
https://code.sololearn.com/W1zxxhk3897w/?ref=app

Answer 3

Lucky Chu
You only need to add
display: flow-root;
to parent container

Check out examples:
https://code.sololearn.com/W1AQfe3zXvzM/?ref=app
https://code.sololearn.com/W49VaXRafnT9/?ref=app

flow-root
The element generates a block element box that establishes a new block formatting context, defining where the formatting root lies.
Read more https://developer.mozilla.org/en-US/docs/Web/CSS/display

https://caniuse.com/#feat=flow-root
For supporting older browsers, you need to add clearfix instead.

Answer 4

Lucky Chu To add clearfix to a container, .parent

.parent:after {
content: "";
display: table;
clear: both;
}
https://code.sololearn.com/WUf0V4LuLnut/?ref=app

Answer 5

Please show your code here so that we can help you
https://www.sololearn.com/post/75089/?ref=app

Answer 6

Do you have an image how is it located? In html code or in CSS as background-image?

Answer 7

can u give example of ur code

Answer 8

Lucky Chu you can do something like

#myImg1 { height: ?%; width: ?%; }
#myImg2 { height: ?%; width: ?%; }
#myImg3 { height: ?%; width: ?%; }
and so on setting your preferred sizing

Answer 9

Lucky Chu Do you mean the image wrap with text with float selector like the code showing here? (since you didn't show your code, we got to figure out how your code look like, by showing other code)

https://code.sololearn.com/WcAnNwHyXp5q/?ref=app

Answer 10

https://www.sololearn.com/post/449731/?ref=app
Here is your code and I totally get what you want. Well how I do mine is, I wrap my img tag in a container
<div class="imgContainer"> <img src="#" /></div> then style the container instead of styling img tag itself. After styling the imgContainer, I'll now make my img tag width 100%to cover the imgContainer and I'll give it an object-fit: cover; then height 100% as well.
Example
.imgContainer{
Width: 400px;
Height: 300px;
Position: relative;
}
.imgContainer img{
Width: 100%;
Height: 100%;
Object-fit: cover;
}
But this method has a disadvantage if not tackled for mobile view cause of the "px"

Answer 11

Lucky Chu .img {background-image: url ("../ img / image.jpg"); background-repeat: no-repeat; background-size: cover} the background stretches in width and height

Answer 12

Lucky Chu Add the attribute width = "" and height = "" to the img tag

Answer 13

BroFar ok thanks, I will try that

Answer 14

Luck Chu, you must good understanding of HTML language you are using. CSS and JavaScript are used to enhance the Website you are working on! You must use other sources to help you with the HTML language. SoloLearn HTML course is only in introduction to the HTML language!

Answer 15

Calviղ thanks man

Answer 16

Anna/Аня BroFar Lily Mea the code is not on sololearn, but the screenshot is on my profile post

Answer 17

it's not a background image, it's an <img> tag.

Answer 18

Anna/Аня the width is on 50% and height is on auto, with max-height of 320px,

if I add more text to the container, it will wrap the image(which I what I want), but then if the text is not enough, the image will overflow the container, which is what I don't want to happen, I was hoping the container gets scaled by the image's height.

note: I didn't set a height for the container, because I needed it to scale as the text increases.

Answer 19

Calviղ what I meant is, I don't want the image to overflow the container,even if the text is little,
check the screenshot on my profile post.✌

Answer 20

Apongpoh Gilbert Clinton Ufere thanks ✌