How to resize an image to fit in the browser window?

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets

How to resize an image to fit in the browser window?

Postby HyperMom on Wed Nov 13, 2019 6:47 am

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....
HyperMom
Jr. Propeller Head
 
Posts: 5
Joined: Thu Aug 02, 2012 4:29 pm

Re: How to resize an image to fit in the browser window?

Postby doloremipsum on Thu Nov 14, 2019 3:03 pm

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!
neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit - sed saepe cum dolor apud multos callidos mutuetur, reduci potest.
doloremipsum
Propeller Head
 
Posts: 70
Joined: Mon Aug 26, 2019 2:11 pm


Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 3 guests