FANDOM


  • Hello!

    I was wondering if there is a way to make an image automatically expand to fill an infoboxes parimeters. 

    https://berenstainbears.fandom.com/wiki/Template:Book

    Thanks in advance!

      Loading editor
    • Do you have an example of what you’re looking for with the photo in the infobox?

        Loading editor
    • It looks like the infobox from the Star Wars Wiki uses a photo that doesn’t have a white background. You can possibly upload the photo below to your wiki.
      8BDEE7D0-FFFA-4E24-B4EF-8402F662EEBC
        Loading editor
    • What I mean is, is there a way to make photos inserted into an infobox expand to fill the infoboxes area? 

        Loading editor
    • The photos you added are PNGs, and I’m not sure if you can have them fill the entire infobox

        Loading editor
    • Is there a certain kind of photo that can?

        Loading editor
    • I made a mistake with my previous message, they were actually GIFs.

      Anyway, it would be best to use either JPEGs or PNGs on the infobox. The photo I provided above is a JPEG file because it has a background on it.

        Loading editor
    • So like for this page: https://berenstainbears.fandom.com/wiki/The_Berenstain_Bears_Visit_the_Farm

      Would it be possible to make that photo fill the parimeters of the infobox exactly?

        Loading editor
    • Does that wiki use portable infoboxes?

        Loading editor
    • Yes

        Loading editor
    • If it does, try using:

      .pi-border {
          border-width: 0px
      }
        Loading editor
    • That doesn't seem to have worked unfortunately. 

        Loading editor
    • can....

      like

      [[File:EXAMPLE|420px|thumb]]?

        Loading editor
    • change the 420 until it works for you

        Loading editor
    • Lifevault, that syntax is for regular images in page content, not images in portable infoboxes. The two are handled differently. Infoboxes only accept the image name or, in the case of tabbed images, gallery tags.

      The reason the image isn't automatically expanded to fill the whole width of the infobox is that the wiki doesn't want to expand images beyond their original size. Doing that can cause images to "loose quality". However, if you really want to do this, you can force the image to expand using site CSS.

      The wiki already has this in its CSS.

      .pi-image img {
           max-width:100%;
           height:auto
      }

      Just change it to this instead.

      .pi-image img {
           width:100%;
           height:auto;
      }

      You also might want to add the semi-colon after the height like I did in the example. It isn't required but it is good form.

        Loading editor
    • That worked perfectly! Thanks for the help. 

        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
Community content is available under CC-BY-SA unless otherwise noted.