+ 1

how do I make my image fit in properly?

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.

26th Jun 2020, 5:25 AM
Lucky victory
Lucky victory - avatar
21 odpowiedzi
27th Jun 2020, 11:17 PM
Apongpoh Gilbert
Apongpoh Gilbert - avatar
+ 5
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
26th Jun 2020, 5:35 AM
BroFar
BroFar - avatar
+ 4
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.
28th Jun 2020, 5:03 AM
Calviղ
Calviղ - avatar
+ 4
Lucky Chu To add clearfix to a container, .parent .parent:after { content: ""; display: table; clear: both; } https://code.sololearn.com/WUf0V4LuLnut/?ref=app
28th Jun 2020, 5:12 AM
Calviղ
Calviղ - avatar
+ 3
Please show your code here so that we can help you https://www.sololearn.com/post/75089/?ref=app
26th Jun 2020, 6:29 AM
Gordon
Gordon - avatar
+ 2
Do you have an image how is it located? In html code or in CSS as background-image?
26th Jun 2020, 5:35 AM
Anna/Аня
Anna/Аня - avatar
+ 2
can u give example of ur code
26th Jun 2020, 5:35 AM
durian
durian - avatar
+ 2
Lucky Chu you can do something like #myImg1 { height: ?%; width: ?%; } #myImg2 { height: ?%; width: ?%; } #myImg3 { height: ?%; width: ?%; } and so on setting your preferred sizing
26th Jun 2020, 6:22 AM
BroFar
BroFar - avatar
+ 2
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
26th Jun 2020, 7:27 AM
Calviղ
Calviղ - avatar
+ 2
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"
27th Jun 2020, 11:26 PM
Clinton Ufere
Clinton Ufere - avatar
+ 1
Lucky Chu .img {background-image: url ("../ img / image.jpg"); background-repeat: no-repeat; background-size: cover} the background stretches in width and height
26th Jun 2020, 5:42 AM
Anna/Аня
Anna/Аня - avatar
+ 1
Lucky Chu Add the attribute width = "" and height = "" to the img tag
26th Jun 2020, 6:11 AM
Anna/Аня
Anna/Аня - avatar
+ 1
BroFar ok thanks, I will try that
26th Jun 2020, 6:41 AM
Lucky victory
Lucky victory - avatar
+ 1
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!
26th Jun 2020, 11:28 PM
Lloyd L Conley
Lloyd L Conley - avatar
+ 1
Calviղ thanks man
28th Jun 2020, 5:21 AM
Lucky victory
Lucky victory - avatar
0
Anna/Аня BroFar Lily Mea the code is not on sololearn, but the screenshot is on my profile post
26th Jun 2020, 6:08 AM
Lucky victory
Lucky victory - avatar
0
it's not a background image, it's an <img> tag.
26th Jun 2020, 6:09 AM
Lucky victory
Lucky victory - avatar
0
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.
26th Jun 2020, 6:15 AM
Lucky victory
Lucky victory - avatar
0
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.✌
26th Jun 2020, 7:31 AM
Lucky victory
Lucky victory - avatar
28th Jun 2020, 3:18 AM
Lucky victory
Lucky victory - avatar