Forum How do I...?

trying to get images to fit the width of the screen

elrond25
I am trying to get images to fit the screen using the code below. Is there anything I'm missing? Do I need to explicitly set the image size in pixels for image sizing to work in prince? The caption works so I'm not certain where the problem is.

// Builds figures with different alignments
figure {
  counter-increment: figure-count;
  prince-image-resolution: auto, 300dpi;
  width: 100%;

  img {
    width: inherit;

  }

  figcaption {
    font-size: .75rem;
    font-color: rgb(51, 51, 51);
  }

  figcaption::before {
    content: 'Figure ' counter(figure-count) ': ';
  }
}
mikeday
"width: 100%" on the image should be sufficient. How big is it appearing?

(Also I assume these nested CSS rules are being processed by Sass or something similar).
elrond25
Yes, the code in my original post is SCSS.

It's displaying the image shrunk to fit the available space on the page. I've extracted a page to show.
  1. md-2-slides 3.pdf47.3 kB
    page with misplaced and mis-sized image