Skip to main content

Forums

This topic contains 9 replies, has 2 voices, and was last updated by  Bakuryu 1 month, 2 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #281041

    Bakuryu
    Participant

    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

    #281050

    Beverleyh
    Participant

    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

    #281095

    Bakuryu
    Participant

    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.

    #281096

    Beverleyh
    Participant

    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.

    #281103

    Beverleyh
    Participant

    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.

    #281120

    Bakuryu
    Participant

    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.

    #281123

    Beverleyh
    Participant

    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.

    #281124

    Bakuryu
    Participant

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

    #281751

    Bakuryu
    Participant

    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?

    #282026

    Bakuryu
    Participant

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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star