How can I set the height of an image in gatsby? My approach was this:
My query:
image {
fluid {
...GatsbyContentfulFluid_withWebp
}
}
My return:
<Img fluid={image.fluid} style={{ maxHeight: '200px' }} alt={title}></Img>
The image is displaying fine but I query more than one image and using style={{ maxHeight: '200px' }} is not working for all images. Some images having different heights, I would like to display all images with the same height.
What's the proper way of doing this?
I think you are looking for a fixed image, not fluid:
My query:
image {
fixed {
...GatsbyContentfulFixed_withWebp
}
}
My return:
<Img fixed={image.fixed} style={{ height: '200px', width: 'auto' }} alt={title}></Img>
In addition, use the height, not the maxHeight property to force all image's height to 200px.
According to the docs you should use imgStyle property for directly applying styles to underlying <img>
Try something like
<Img
fluid={image.fluid}
imgStyle={{ height: '200px', width: 'auto' }}
alt={title}>
</Img>
style is applied to wrapper of <img> and your images might be overflowing it.
Related
I'm trying to get my video to fit/cover the entire screen and respond to resize just like if you use objectFit: cover or backgroundSize: cover. Right now when the video is too large you can see the left and right side of the video, and when the window is too small, you are able to see the top and bottom.
import React from "react";
import ReactPlayer from "react-player/lazy";
const Header = (props) => {
return (
<ReactPlayer
muted={true}
volume={0}
playing={true}
loop={true}
width="100vw"
height="100vh"
style={{
position: "absolute",
objectFit: "cover",
backgroundSize: "cover",
}}
url={props.videos[1]}
/>
);
};
export default Header;
Here you can see the black background:
Too tall:
Too wide:
The container's size is 100vw, 100vh, and the ratio of the video is 4096x2160.
Here an example that I'm trying to not do since the video shrinks with the page:
https://jsfiddle.net/e6w3rtj1/131/
I found my solution, for some reason the react-video package doesn't work with object-fit or background-size, so I had to try something else.
I found that you can just use the html5 video and source tags for the video.
Here the code:
<video
autoPlay
muted
loop
style={{ height: "100%", width: "100%", objectFit: "cover" }} //object-fit:cover
>
<source src={props.videos[1]} type="video/mp4" />
</video>
In my React Native app, I have a red box of height 300 that I want to center vertically, and an image that I want to sit inside and at the top of this red box. Here is my code so far:
import React, { Component } from 'react';
import { View, Image} from 'react-native';
export default class Login extends Component {
render() {
return (
<View style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<View
style={{
borderWidth: 3,
borderColor: 'red',
width: "100%",
height: 300
}}
>
<Image
source={require('../../images/swoord-top.png')}
style={{
width: "100%",
height: "100%",
resizeMode: "contain",
borderWidth: 3
}}
>
</Image>
</View>
</View>
);
}
}
Here's what this looks like:
The red box is the outer box I mentioned, and the black box is just the border of the Image. The problem is that this black box (ie the Image) expands to fill the red box vertically, and the image is vertically centered inside this black box, so it's vertically centered inside the red box, as opposed to at the flex-start position that I want it at. I've tried adding justifyContent: flex-start and flexShrink: 1 to the Image and neither has made a difference.
Does anyone know how I can approach this?
NOTE:
If I remove the height: 100% on the Image, I get this:
UPDATE:
To clarify, this is what I'd like it to look like. I've removed the black border here. I moved it up to where I want it by adding top: -95, but this won't work in general because the value would be different for different devices:
try doing like this
<Image
source={require('../../images/swoord-top.png')}
style={{
width: "100%",
borderWidth: 3
}}
resizeMode={"contain"}
/>
There is a difference between Image (the view) and the content of that image. On your screenshot, the image view has the black border and its content is sitting inside of it. Because they have different aspect ratios, there is going to be either a blank space or cut-off on the content. You can't adjust position of the content as it's not laid out on flex basis. Image view is just a window that then renders image content. There is no property to tell Image where to align that content
Your problem comes from the fact that screen width differs, and aspect ratio of your container also differs (variable width but constant 300 height). What you need to do is
measure container width
determine proper aspect ratio for the image based on image resource width and height
set your image width to 100% and its height according to received aspect ratio
here, my image dimensions are 1005 * 219:
const Test = () => {
const [width, setWidth] = useState(0);
return (
<View>
<View
onLayout={e => setWidth(e.nativeEvent.layout.width)}
style={{ width: '100%', height: 300, borderWidth: 1 }}>
<Image
style={{
width: '100%',
height: (width / 1005) * 219,
borderWidth: 1,
borderColor: 'red',
}}
source={require('...')}
/>
</View>
</View>
);
};
I am using reactjs-popup and it displays its content. But I am unable to set its width. It is not taking effect for some reason. What am I doing wrong?
I have tried width:'50%' and width:'50px'. But it always displays the popup in a very wide huge rectangle. If I resize the whole browser only then the popup reduces in size.
<Popup style={{width:'50%'}}
open={true}
closeOnDocumentClick
keepTooltipInside=".tooltipBoundary"
>
<div className="modal" style={{display:'flex', background: 'radial-gradient(#cde6f9, #6191bf)'}}>
<a className="close">
×
</a>
<div style={{alignitems: 'center', justifycontent: 'center'}}>
<h4>Enter Project Name : </h4>
<input style={{alignitems: 'center', justifycontent: 'center'}} type="text" name="fname"></input><br/><br/>
<button style={{alignitems: 'center', justifycontent: 'center'}} >Create</button>
</div>
</div>
</Popup>
Assuming that the Popup component comes from an external package, try to read the documentation for more styling options.
You can probably also view the component in node_modules/[package_name] folder. Try giving it a className there or style it using the style property.
Finally, you can try wrapping the popup with another element and capture the style using css.
Something like that:
.popup-wrapper {
width: 100%;
}
.popup-wrapper > * {
width: 50%;
}
You can certainly globally update the content styles as other posts here imply. But if you want to set the style for a specific popup...
If you inspect the <Popup HTML, you will see there are two divs. One has a class defined with popup-content and a second named popup-overlay. You can overwrite the styles here using the contentStyle and overlayStyle attributes of any given <Popup.
For example if you want to change the width of the content:
<Popup
...set other attributes here as needed
contentStyle={{ width: '100%' }}
>
Show this content
</Popup>
Wrap the popup in div and give it a class like modalWrapper.
You can target the main popup container div by using this css.
.modalWrapper > div > div {
width: 484px !important;
padding: 24px !important;
border-radius: 10px;
}
I am interesting in how to make full screen image landscape orientation, but without height: 100%, so width will be 100% but what is with height, because in react native height: not work=
try like this
<View style={{ flexDirection: 'row',}}>
<Image
style={{
flex: 1,
width: null,
height: '100%',
overflow: 'hidden',
}}
resizeMode='contain'
source={{ uri: 'image path' }}
/>
First of all, install the package named #react-native-community/hooks ( npm i #react-native-community/hooks )
then import useDimentions and useDeviceOrientation from the package above.
Example: import {useDimentions,useDeviceOrientation } from "#react-native-community/hooks"
Destructure them like:
const { landscape, portrait } = useDeviceOrientation();
const { screen, window } = useDimensions();
landscape, portrait are booleans
screen, window are the objects with height, width and etc. ( just check it by console.log)
Then use screen.height or window.height to get the device's height
I develop a SPA application and I wish place table in parent element bounds but I can't set explicit height. I can set scroll.y of table body but then result total height is large by header height. I can't get header height to calculate total needed height.
How I may place table into parent bounds?
<div style={{ width: '100vw', height: '100vh'}}>
<Table scroll={{ y: '100%' }} style={{ width: '100%', height: '100%' }} pagination={false} columns={columns} dataSource={data} />
Seems like it's more of a CSS issue within Ant then a bug. it's a browser limitation.
Try working with vh units mixed with calc:
Example:
scroll={{ y: 'calc(100vh - 4em)' }}
Related Github discussion (require tranlation)
Instead of setting scroll={{ y: '100%' }}, set a number. Because scroll y only takes a number where scroll x takes a number or boolean.