docs: Make images responsive
This commit is contained in:
parent
bb7549bc01
commit
eec9a3eb6e
@ -159,7 +159,7 @@ const device = getCameraDevice(devices, 'back', {
|
||||
This will try to find a [`CameraDevice`](/docs/api/interfaces/CameraDevice) that consists of all three physical Camera Devices, or the next best match (e.g. "Dual-Camera", or just a single wide-angle-camera) if not found. With the "Triple-Camera", we can now zoom out to a wider field of view:
|
||||
|
||||
<div align="center">
|
||||
<img src="/img/multi-camera.gif" width="55%" />
|
||||
<img class="doc-image" src="/img/multi-camera.gif" />
|
||||
</div>
|
||||
|
||||
If you want to do the filtering/sorting fully yourself, you can also just get all devices, then implement your own filter:
|
||||
|
@ -13,8 +13,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||
HDR ("High Dynamic Range") is a capture mode that captures colors in a much wider range, allowing for much better details and brighter colors.
|
||||
|
||||
<div align="center">
|
||||
<img src="/img/sdr_comparison.png" width="51%" />
|
||||
<img src="/img/hdr_comparison.png" width="51%" />
|
||||
<img class="doc-image" src="/img/sdr_comparison.png" />
|
||||
<img class="doc-image" src="/img/hdr_comparison.png" />
|
||||
</div>
|
||||
|
||||
### Photo HDR
|
||||
@ -22,7 +22,7 @@ HDR ("High Dynamic Range") is a capture mode that captures colors in a much wide
|
||||
Photo HDR is accomplished by running three captures instead of one, an underexposed photo, a normal photo, and an overexposed photo. Then, these images are fused together to create darker darks and brighter brights.
|
||||
|
||||
<div align="center">
|
||||
<img src="/img/hdr_photo_demo.webp" width="65%" />
|
||||
<img class="doc-image" src="/img/hdr_photo_demo.webp" />
|
||||
</div>
|
||||
|
||||
### Video HDR
|
||||
|
@ -13,7 +13,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||
Video Stabilization is an algorithm that stabilizes the recorded video to smoothen any jitters, shaking, or abrupt movements from the user's camera movement.
|
||||
|
||||
<div align="center">
|
||||
<img src="/img/action_mode_demo.gif" width="65%" />
|
||||
<img class="doc-image" src="/img/action_mode_demo.gif" />
|
||||
</div>
|
||||
|
||||
There are multiple different approaches to Video Stabilization, either software- or hardware-based. Video Stabilization always crops the image to a smaller view area so it has room to shift the image around, so expect a "zoomed-in" effect. Also, since Video Stabilization is a complex algorithm, enabling it will increase the time the Camera takes to initialize.
|
||||
|
@ -30,7 +30,7 @@ A Camera device has different minimum, maximum and neutral zoom values. Those va
|
||||
* The `neutralZoom` value is often `1`, but can be larger than `1` for devices with "fish-eye" (ultra-wide-angle) cameras. In those cases, the user expects to be at whatever zoom value `neutralZoom` is (e.g. `2`) per default, and if he tries to zoom out even more, he goes to `minZoom` (`1`), which switches over to the "fish-eye" (ultra-wide-angle) camera as seen in this GIF:
|
||||
|
||||
<div align="center">
|
||||
<img src="/img/multi-camera.gif" width="55%" />
|
||||
<img class="doc-image" src="/img/multi-camera.gif" />
|
||||
</div>
|
||||
|
||||
The Camera's `zoom` property expects values to be in the same "factor" scale as the `minZoom`, `neutralZoom` and `maxZoom` values - so if you pass `zoom={device.minZoom}` it is at the minimum available zoom, where as if you pass `zoom={device.maxZoom}` the maximum zoom value possible is zoomed in. It is recommended that you start at `device.neutralZoom` and let the user manually zoom out to the fish-eye camera on demand (if available).
|
||||
|
@ -19,15 +19,35 @@
|
||||
--docusaurus-highlighted-code-line-bg: rgb(61, 63, 67);
|
||||
}
|
||||
|
||||
img {
|
||||
/* Images inside the docs that are centered/inside text */
|
||||
.doc-image {
|
||||
border-radius: 15px;
|
||||
max-width: 55%;
|
||||
max-height: 30vh;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.doc-image {
|
||||
max-width: 80%;
|
||||
max-height: 50vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 600px) and (max-width: 997px) {
|
||||
.doc-image {
|
||||
max-width: 55%;
|
||||
max-height: 50vh;
|
||||
}
|
||||
}
|
||||
@media (min-width: 997px) and (max-width: 1145px) {
|
||||
.doc-image {
|
||||
max-width: 80%;
|
||||
max-height: 30vh;
|
||||
}
|
||||
}
|
||||
|
||||
/* align image to the right */
|
||||
.image-container {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* mobile screen; align center */
|
||||
@media (max-width: 600px) {
|
||||
.image-container {
|
||||
@ -35,14 +55,12 @@ img {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* wider screen; align right again */
|
||||
@media (min-width: 600px) and (max-width: 997px) {
|
||||
.image-container {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
/* even wider screen but with sidebars; align center cuz we dont have enough space for right */
|
||||
@media (min-width: 997px) and (max-width: 1145px) {
|
||||
.image-container {
|
||||
|
Loading…
Reference in New Issue
Block a user