Image overflow revealed as text wrap causes element height to change

[Bakuryu]

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/YdvgLq

[Beverleyh]

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-design

[Bakuryu]

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.

[Beverleyh]

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-position to pin it at the top (so the reveal happens from the bottom). Setting it to top might be enough.

[Beverleyh]

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.

[Bakuryu]

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.

[Beverleyh]

Maybe if you put the img in a container – like in the .img element so that you can keep the pseudo element pushing against it?

You might have to absolutely position the img inside it (plus relatively positioned .img) and hide the overflow.

[Bakuryu]

That is exactly what I needed, thank you so much for your help :)

[Bakuryu]

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.

https://codepen.io/Bakuryu/pen/jdEWZG

Edit: just fixed it so it works like it does in my main project, seems rem-calc doesn’t work in Edge?

[Bakuryu]

Still having this problem with Edge if anyone has any advice on how to fix it for Edge I’d super appreciate it.

[Author]

Posts