Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Responsive Image

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #253096
    s_cristina
    Participant

    Hello there :)

    I would like to learn how to do a responsive Image/Page with fixed margin left, right and bottom.
    This page should be without scrolling.. but this I knwo how to handle :)

    Image example: https://drive.google.com/open?id=0B6tIrM-3L0xgYzRnR2o2elptc1E

    #253097
    Atelierbram
    Participant

    Responsive images (which scale with the browser window) can be done in CSS with img { max-width: 100%; }. When you want the image to always fill the container, than better target that big image with it’s own class-name and set it’s width to 100%, something like .hero-image { width: 100%; }

    #253142
    s_cristina
    Participant

    I tried it and works fine, except the bottom. Is it possible that the container has a fixed margin-bottom and then the picture will be cut or just show as much until it hits the end of the container ?

    #253143
    s_cristina
    Participant

    something like this: https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image_background3

    that it goes until the fixed container and then the image just gets bigger until the container it allows.

    #253146
    Atelierbram
    Participant

    I tried it and works fine, except the bottom

    I would like to see a live demo of this issue

    Using a background-image with background-size: cover ISO an inline image fixes your problem, … if not, why not?

    #253155
    s_cristina
    Participant

    It looks like this.
    well i would like to have always the same distance right bottom and left 40px.
    But if I do background-image I don’t have anymore the paddings around. Or do I?
    Do you have an example for this inline image?
    Thanks for helping

    #253163
    Atelierbram
    Participant

    Made a fork of your demo with an added example using a background-image: that one with a nested inner div using the so-called “intrinsic ratio or padding-bottom hack” for the 40px padding. Hope this is helpful.

    #253172
    s_cristina
    Participant

    Omg! Thanks a lot!!!!!! It works!!! finally! thank you so much!
    I just had to change position to fixed and added overflow-y hidden and now I have what I was searching for a long time. Thanks a lot for your help!

    This is the result

    #253179
    Atelierbram
    Participant

    Glad to be of help, … not that I really understand, because switching from position: absolute to position: fixed also allows you to loose the wrapper div <div class="bg-image"> with the padding-bottom hack, as far as I can see, for fixed elements are fixed in relation to the browser window, so yeah, I don’t know it all depends on the implementation I suppose …

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘Design’ is closed to new topics and replies.