January 8, 2019 at 7:58 am #281041
I am trying to make a profile element that has an image on the left and a list of info on the right. The problem is when the page is shrunk the text tends to wrap causing the parent of both elements to change it’s height, which is fine, except that the picture is either too small to start with and there is white space below it or with how I have it setup now in the codepen, the elements don’t resize, but the image change to fit element, but then the text gets cut off. Not exactly what I am looking for, if anything I would like the word wrapping text that changes the parent element’s height causes the image’s overflow to be revealed. How do I go about doing that?
You can see what I am talking about with this pen I hope. https://codepen.io/Bakuryu/pen/YdvgLqJanuary 8, 2019 at 9:21 am #281050
I can’t check anything as I’m stuck on mobile right now, but have a look at method 2 or 3 here (they exhibit faux cropping/overflow reveal). They might give you some ideas to play with http://blog.fofwebdesign.co.uk/9-3-ways-to-resize-scale-web-images-in-responsive-designJanuary 8, 2019 at 12:43 pm #281095
The second one definitely seems to be close to what I am looking for I updated the code pen you can see what I did with it. The only thing I am not happy with entirely, and this might not be possible to fix, is that its basically zooming in on the image. What I would like is the image to stay the same size and for the bottom of the image to be revealed as the word wrapping causes the containers height to change.January 8, 2019 at 1:57 pm #281096
That might be down to
background-size: cover;. Try changing it to the image width to see if that helps (still on mobile so restricted a bit in what I can test).
You might also want to set
background-repeat: no-repeat;and play around with the
background-positionto pin it at the top (so the reveal happens from the bottom). Setting it to
topmight be enough.January 8, 2019 at 2:32 pm #281103
Yes – that seems to do the trick (if I’m understanding correctly) https://codepen.io/anon/pen/Ydjqbo
I used a different portrait image so that I could see the vertical reveal a little easier. Comment out the blahs to see the behaviour.January 9, 2019 at 8:12 am #281120
Alright I got it working so thank you for that and for your help, but I have one last question. Is it possible to do this without using background-image and instead having an img element? I tried a lot of different things, but could not get the image to not dictate the height without position is absolutely and trying to position it and the text in a nice way after that proved to be a nightmare.January 9, 2019 at 9:00 am #281123
Maybe if you put the
imgin a container – like in the
.imgelement so that you can keep the pseudo element pushing against it?
You might have to absolutely position the
imginside it (plus relatively positioned
.img) and hide the overflow.January 9, 2019 at 9:23 am #281124
That is exactly what I needed, thank you so much for your help :)January 23, 2019 at 6:37 am #281751
And I am back. I thought I had it down, and technically I do, but not with Edge for some reason.
If you open the codepen below in Edge the image doesn’t show, although in my other implementation it does show up because I have a min-height set, but on firefox, chrome, and even IE it shows up resizes appropriately.
Edit: just fixed it so it works like it does in my main project, seems rem-calc doesn’t work in Edge?January 30, 2019 at 6:10 am #282026
Still having this problem with Edge if anyone has any advice on how to fix it for Edge I’d super appreciate it.
You must be logged in to reply to this topic.