My first FreeCodeCamp CPen Project, help for image resize/fit in div

#1

A Tribute to Sri Devi

See the Pen SHRI DEVI, Bollywood Superstar by Fz (@fzsx)

Help !>
how to rezize/crop/fill/fit/ image in div.

im having issues with the second image(captioned: Queen of Beauty)

prev wrong refrenced code corrected below

[absolute]
line no(MAY CHANGE): 11(HTML), 85(CSS)
css id: imgfit
[/absolute]

line no(MAY CHANGE): 20(HTML),
css id: id3

This is my first Ask-For-Help to code post on whole web.

Thanks,
Fz

1 Like
#2

Can you be a bit more specific about what you want to change?

Your page looks great, btw.

#3

Hi Fzx!

You can try putting your img inside a div, and set the max height/width for that image. It will stay responsive when resizing, and never get larger than the size you set it to.

For example:
HTML:

div align="center"
img class=“img-responsive frost” id=“imgfit” width=“100%” src=“https://www.onlinekhabar.com/wp-content/forum/uploads/2017/07/sridevi-kapoor.jpg” caption=“Roop Ki Rani (Queen Of Beauty)”
/div

CSS:

#imgfit {
background-clip: padding-box;
max-height: 300px;
max-width: 300px;
margin-bottom: 10px;
}

I added a little margin to separate it from the bottom images. Hopefully that’s what you’re looking for.

Good luck in your future projects!

#4

sry for me bieng unspecific, and my mad code, wrong ref to HTML line no: 20 instead 11 and id=id3 instead imgfit.

the dimensions of 3rd and 4th images are same, and fit great in-line, with .col-sm-3; except 2nd one(skip 1st image, its for front banner)

thanks for fast rep, check this cleaned code https://codepen.io/fzsx/pen/ZrZMqe
like this issue https://stackoverflow.com/questions/30595321/how-to-scale-image-to-fit-the-container
i tried @AloeandNatural method but but…

#5

Let’s see if I’m understanding this correctly: You want the images to be the same height, rather than the same width? Actually it looks like you found the answer yourself?

#6

Dev notes had me :rofl:

#7

ya but im not satisfied, i might use carousel to adapt for mobile view/low res, if i go with that flex box thing.

anyway i close my project moving to next, will keep it as it is. carousel is not working, tat also needs image resizing(+ hrs of debugging). all this is bonging my head.

https://codepen.io/fzsx/pen/LQvqBK

ty for help

#8