Hi.
I did a search on the very subject line here on the forum and couldn't find anything, so apologies if this topic has been covered.
I have a screenshot of the home screen from where everything happens in our software. I'm hoping to make this interactive but before I even get to that, I want to know how to make this screenshot resize depending on the size of the browser. I found this on another forum and it uses some clever CSS razzle-dazzle, but I'd like to just be able to do this in Flare, please?
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
<body>
<img src="images/your-image.png" />
</body>
There are a few other examples in the link below but I c/p'd the smallest one. I'm still a noob when it comes to CSS and HTML so I would not even know where to drop this into my page?
Lifted from here:
https://stackoverflow.com/questions/616 ... ser-window
TIA,
Mary
Pgh, PA
PS: Where did yinz guys pick up CSS/HTML? Asking for a friend....
How to resize an image to fit in the browser window?
-
doloremipsum
- Sr. Propeller Head
- Posts: 290
- Joined: Mon Aug 26, 2019 2:11 pm
Re: How to resize an image to fit in the browser window?
I haven't dealt with your exact problem, but here's my thinking:
The examples given in that Stack Overflow may well work! Flare stylesheets are no more and no less than CSS stylesheets, only limited by what Flare will support. This differs between different output types. I would suggest that you open your stylesheet as text (right-click and select Open with Internal Text Editor or Notepad). Then you can start putting bits of CSS into your stylesheet and modifying your HTML code in the topic to match until you find something that has the behaviour you want.
Of course, that's my general suggestion - if you don't know any HTML or CSS that probably doesn't seem so easy! There are lots of quick online courses for HTML/CSS and heaps of tutorials/notes on finer points. I first learned HTML from Codeacademy and usually go to w3schools for anything I need more tips on. The most basic thing you'd want to know for this testing is that the HTML tags (e.g. <p>This is a paragraph</p>) correspond to CSS selectors (p {style-information: here}). To create alternative types of tags, you add style classes: e.g. <img class="fittowindow" /> will use the style from img.fittowindow { } in the stylesheet.
Others may have more specific suggestions!
The examples given in that Stack Overflow may well work! Flare stylesheets are no more and no less than CSS stylesheets, only limited by what Flare will support. This differs between different output types. I would suggest that you open your stylesheet as text (right-click and select Open with Internal Text Editor or Notepad). Then you can start putting bits of CSS into your stylesheet and modifying your HTML code in the topic to match until you find something that has the behaviour you want.
Of course, that's my general suggestion - if you don't know any HTML or CSS that probably doesn't seem so easy! There are lots of quick online courses for HTML/CSS and heaps of tutorials/notes on finer points. I first learned HTML from Codeacademy and usually go to w3schools for anything I need more tips on. The most basic thing you'd want to know for this testing is that the HTML tags (e.g. <p>This is a paragraph</p>) correspond to CSS selectors (p {style-information: here}). To create alternative types of tags, you add style classes: e.g. <img class="fittowindow" /> will use the style from img.fittowindow { } in the stylesheet.
Others may have more specific suggestions!
in hoc foro dolorem ipsum amamus, consectimur, adipisci volumus.