feat(docs): add description for an iframe aspect ratio fix #263
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
berezovskyicom
changed the title
amccloud
reviewed
Apr 28, 2020
docs/embed.md
Outdated
Comment on lines
81
to
108
|
|
||
| ## Fix asset scaling in an iframe | ||
|
|
||
|
|
||
| In some cases, scaling can work not as expected due to different asset aspect ratios, which means that your embed might look a bit small. | ||
| This can be solved by maintaining aspect ratios. | ||
|
|
||
|
|
||
| #### Example of an aspect ratio fix | ||
|
|
||
|
|
||
| ```html | ||
| <div style="position: relative; padding-top: 75%; min-width: 400px;"> | ||
| <iframe | ||
| style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" | ||
| src="https://app.goabstract.com/embed/c53e8159-2e24-4118-b02b-6fe4b3a3afee" | ||
| frameborder="0" | ||
| allowfullscreen | ||
| > | ||
| </iframe> | ||
| </div> | ||
| ``` | ||
| Embed should have a wrapper, full width and height, so it would inherit the container size. | ||
| In this case, `padding-top` is responsible for an aspect ratio, and to get a value you have to divide height on the width and multiply by 100 (`height / width * 100`), which means that `3 / 4 * 100 = 75` - is our `padding-top` value. | ||
|
|
||
|
|
||
| More details can also be found [here](https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe/). | ||
|
|
There was a problem hiding this comment.
Looks like there is trailing whitespace before each line. Can you clean up the whitespace and HTML indentation
There was a problem hiding this comment.
Thanks for noticing @amccloud!
docs/embed.md
Outdated
|
|
||
|
|
||
| In some cases, scaling can work not as expected due to different asset aspect ratios, which means that your embed might look a bit small. | ||
| This can be solved by maintaining aspect ratios. |
There was a problem hiding this comment.
This is less of a fix and more of a fluid embed tutorial. Most 3rd party embeds work this way by default and require a wrapper element to maintain aspect ratio
Suggestion for title
# Create responsive embed to maintain aspect ratio
Co-Authored-By: Andrew McCloud <[email protected]>
…bstract-sdk into feat/docs-iframe-scale-note
amccloud
approved these changes
Apr 29, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.