FANDOM


  • Hello, I'm reposting this from CC: on my wiki I'm using this code:

    .portable-infobox .pi-image-thumbnail {
        max-height: 500px;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    If you are wondering why I'm using this, it's because I want the image to use the maximum width even if its original width is smaller then the infobox's (like here), but still limiting the maximum height.

    The issue is, however, that (only) in Chrome there is a little white space on the right which I don't know how to get rid of. You can see some examples here or even better here (Chrome - Firefox). Inspecting the page, the width is actually in the correct size.

    I tried to use object-fit: cover instead, but the images were sometimes being cut off (like here (screenshot), if you try to use it)

    I know that the simplest solution would be to not resize the image, but isn't there a way to fix this?

      Loading editor
    • We pretty typically use the first three of those parameters. I only recently started using object-fit myself. Did you try object-fit: fill?

        Loading editor
    • "fill" doesn't keep the proportions.

        Loading editor
    • It did on the three example pages.

        Loading editor
    • Try it here. I guess there it does not keep the proportions because the height is limited, but if I remove max-height: 500px; then "tall image" will be stretched a lot.

        Loading editor
    • Keep in mind that the native maximum height of the image is going to be 500px already. Vignette won't make it bigger than that. So if the maximum is 500px tall and you want to keep the aspect ratio and still make it bigger, that image is really difficult. Your best bet for that image is actually leaving it at 210px × 500px and not try to grow it any more with CSS. 

        Loading editor
    • OR, if you're interested in doing it this way, you could have it crop everything over a certain height with CSS. The full image would still be available upon clicking.

        Loading editor
    • Wait, I'm not interested in enlarging images over the native limits. I'm actually interested only in enlarging images under the native limit, like in this case.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.