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)
[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
Can you be a bit more specific about what you want to change?
Your page looks great, btw.
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/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!
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…
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?
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.
ty for help
