How to reduce width of a div without hard coding values? the only element it contains is a image

As you can see in the image the parent component has display:flex, jcc, aic properties. parents has two child divs one containing ul and other is image. the original image is of diff size so i used width:20% on img, the size of the image is reduced but the div surrounding is not reducing in width. how to fix it? https://codepen.io/avinash-tallapaneni/pen/ExRomwX
28 Replies
glutonium
glutonium•2y ago
if u want the div to fit the img u can set width : fit-content; TO the div and it would resize itself to fit to it's contents widthwise
Avinash
Avinash•2y ago
i tried that before. As you can see the image size is way bigger.
glutonium
glutonium•2y ago
is it big by default or did the img get bigger when given the fit width to the div
Avinash
Avinash•2y ago
iage is big by default 612*612 i guess
glutonium
glutonium•2y ago
u r trying to fit the div to the img ryt? in the picture in your questions the img is small
Avinash
Avinash•2y ago
yes, im trying to fit it to the div. So the entire lower section looks somewhat same sized
glutonium
glutonium•2y ago
u trying the img to fit the div or the div to fit the img
Avinash
Avinash•2y ago
yeah i gave width:20% on image but not on the div
glutonium
glutonium•2y ago
well have u given fit Content TO THE DIV?
Avinash
Avinash•2y ago
im trying to fit the image to the div, by default the image is big. i tried giving fit content to the div.
glutonium
glutonium•2y ago
okee so that won't work cause fit Content is when u wanna fit the div to the content u r trying to fit the img to the div or say content to the div
Avinash
Avinash•2y ago
i replaced image with hello, its working fine , but when i add image src its taking spaces. i dont want hard code value on the div tho
glutonium
glutonium•2y ago
well first off since the img is square, make the div square as well and then to the div give position : relative; and to the img give
width : 100%
width : 100%
this way the img should take 100% thw width of the div and since the div is a square as well it should take 100% the height of the div as well try what I said
Avinash
Avinash•2y ago
nope didnt work
glutonium
glutonium•2y ago
share ss of both the html and css of the img and div part
Avinash
Avinash•2y ago
glutonium
glutonium•2y ago
well U want the img to fit the div but the div itself doesn't have any height or width what will it fit based on? u can see the div without height and width is cause it's fitting itself to the img
Avinash
Avinash•2y ago
i think yesterday one of the mod said not to use height/width. so i followed that method, it was working fine as i only gave dimensions for the image but not for the divs. here also i tried the same but didnt work 🙄 i gave values for div and it worked thumbup
glutonium
glutonium•2y ago
well lemme tell you if u make a div , and do nothing else u won't see it cause it doesn't have any height by default basically it doesn't exist so if u want to do something relative to that div u need to give that div an existence u can't make something relative to something that has no appearance and mod said not to giv fixed value is cause fixed values r to be avoided as much as one can cause it creates many problems when it comes to responsiveness u just have to know when to use and when to not
Avinash
Avinash•2y ago
if that is the case wont it cause problem with the image now? think
glutonium
glutonium•2y ago
it will if u give the div a value like px if your div is relative to something else then it'll depend on that but then again if THAT something else has a fixed unit like px then THAT something can create problem and then since the div id relative to THAT something the div will create problem and so will the img😂 that's why u need to be careful about using them in this case u have no choice but I'd still recommend u to use % insted of px
Avinash
Avinash•2y ago
ok now i understood i only use rems for dimensions 😬
glutonium
glutonium•2y ago
well, thinking simple, these problems occur mostly when the change is drastic u can use media query to make it compatible for most devices
Avinash
Avinash•2y ago
i saw kevin video where ems scale on previous parent or something, so im like nope, i will stick to rems
glutonium
glutonium•2y ago
but u should try your hard to make it as responsive as u can without media query they r very very tricky to get youe heads around when it comes to units I'd recommend to make the biggest parent relative to the screen size using vh and vw and then any direct child of that div will be realtive to that big div and then things inside those smaller divs will he realtive to their own direct parent and so on
Avinash
Avinash•2y ago
as you can see mine is not responsive what so ever . tried my best but i couldnt 🥹
glutonium
glutonium•2y ago
that's why media query u can make your webpage responsive for both devices without media query well when u make things realtive to the screen they WILL be responsive in one regard and that is the elements will shrink or enlarge im respect to the screen but the layout will not change so it won't look good either
Avinash
Avinash•2y ago
yeah i have to do mq after im done with desktop version
Want results from more Discord servers?
Add your server