<script>
import { Img } from 'flowbite-svelte';
</script>
<Img src={image_url} alt="Listing" class="rounded-lg"/>
How do I define the height of the image? I have tried <Img src={image_url} alt="Listing" size="h-10" class="rounded-lg"/> but it had no effect.
Per docs, you can use imgClass to add styles to Image.
imgClass="h-auto"
<Img src={image_url} alt="Listing" class="rounded-lg" imgClass="h-10"/>
You can use class attribute :
<Img src={image_url} alt="Listing" class="rounded-lg h-10" />
Related
I'd like to align some text with a logo on the same line:
<div id="container" style="white-space:nowrap">
<div id="image" style="display:inline;">
<Link href="" target="_blank">
<img
src={img}
loading="lazy"
width="40px"
height="40px"
alt=""
/>
</Link>
</div>
<div id="texts" style="display:inline; white-space:nowrap;">
<strong> 75 </strong>
</div>
</div>
But when I try to run it, I receive these errors:
Line 61:41: Style prop value must be an object react/style-prop-object
Line 62:41: Style prop value must be an object react/style-prop-object
Line 73:41: Style prop value must be an object
In react you need to use in style in object,
https://reactjs.org/docs/dom-elements.html#style
style={{
whiteSpace:'nowrap',
display:'inline',
}}
style prop takes an object.
Full code:
<div id="container" style={{ whiteSpace: "nowrap" }}>
<div id="image" style={{ display: "inline" }}>
<Link href="" target="_blank">
<img src={img} loading="lazy" style={{ width: "40px", height: "40px" }} alt="" />
</Link>
</div>
<div id="texts" style={{ display: "inline", whiteSpace: "nowrap" }}>
<strong> 75 </strong>
</div>
</div>
CodeSandbox Demo
Before we can answer the question you ask in the title of this post, you have to fix your inline styles, hence the error you receive from React. The answer to your question using CSS will be at the bottom of the post.
When using inline styles in React, you will need to create an object. An object is the use of key, value pairs. So, using the code given in your example, style="display:inline;" is not an object, and thus will not work as you have seen. To make this inline style work, you will need to do one of the following.
Create an object within the JSX
This method can get messy, so if you are planning to write all your styles as inline styles, I suggest using method 2.
To do this, you can follow #RiTeSh 's example. You will need to create an object and pass that to the element's style prop, WHICH CANNOT BE A STRING, as you can see from the errors you are getting. You can do the following:
// Notice how the value is the only string in the object.
style={{
whiteSpace:'nowrap',
display:'inline',
}}
And to see what this would look like when used in an element:
<div style={{whiteSpace:'nowrap', display:'inline'}} >
Hello World
</div>
Store the styles in a variable
Compared to method 1, this is a much cleaner way to add inline styles as it doesn't create a jumbled mess in your render() function.
Before you reach the render() function, create an object and store it in a variable like the one below.
const styleObject = {
whiteSpace:'nowrap',
display:'inline',
};
return (
// Your JSX here
);
And when you apply the styleObject to the JSX element, it should look like the following:
return(
<div style={styleObject} >
Hello World
</div>
);
Make img and text appear on the same line
This is quite a simple answer if you use the display: flex property on the wrapper element, which, in your case, is the div with an id of container. Here is a simple read about flexbox from W3 Schools
With inline styles on the container element:
style={{display: 'flex'}}
With CSS:
#container {
display: flex;
}
I am using the picture tag to toggle between two images. Image 1 is 240x240 and will display when the window is 32em and above. Image 2 is 112x112 and will display when it's under 32em.
I am trying to apply a class .active to the div so Image 1 will show and Image 2 will hide.
<div>
<picture>
<source media="(min-width: 32em)" srcset="http://via.placeholder.com/240x240/AEAEAE/000000?text=Ambassador+Image+(240x240)">
<img src="https://via.placeholder.com/112x112"/>
</picture>
</div>
I'm not sure what are your constraints with the HTML, but if it's possible, I'd suggest using two img nodes directly inside the div, and to put our CSS inside a style node.
For example :
#img240 {
width:240px;
height:240px;
}
#img112 {
display: none;
width:112px;
height:112px;
}
#media (max-width: 32em) {
#img240 {
display: none;
}
#img112 {
display: block;
}
}
<div>
<img id="img240" src="..." alt="240x240" />
<img id="img112" src="..." alt="112x112" />
</div>
I'm not familiar enough with the picture node and with inline CSS media queries to give an answer closer to your existing code. My apologies!
Image 1 is shown with min-width:32em and image 2 shown for width below 32em without the active class on div.
<div>
<picture>
<source media="(min-width: 32em)" srcset="https://picsum.photos/240">
<img src="https://picsum.photos/112" />
</picture>
</div>
I want to display Carousel in a rectangle (height
You can check my code here:
<div>
<NavBar/>
<div className="carousel-wrapper">
<Carousel width={"40%"}>
{
this.state.images.map((photo, index) => (
<div>
<img src={photo}/>
</div>
))
}
</Carousel>
</div>
</div>
As suggested by #Awais, I have added following styling for image:
Carousel autoPlay={true}showArrows={true} width={"70%"} showIndicators={true} infiniteLoop={true} >
{
this.state.images.map((photo, index) => (
<div>
<img src={photo} style={{width: "100%", height:"400px",objectFit:"cover"}}/>
</div>
))
}
</Carousel>
However, now the "suggestion thumbnails" look weird.
How shall I change thu,bnail dimensions?
As you can see in below fiddle the image is some how crop due to object-fit:cover property its just like background-size:cover
Apply the img style to you image in carousel, if its not applies try to use !important to override carousel styles
img{
width: 100%;/*to stretch it to full widht*/
height: 200px;/*you image square height*/
object-fit:cover; /*cover you image*/
}
<div>
<img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-260nw-789676552.jpg">
</div>
I'm new to styling, sorry if this is too basic.
In my React app, I am trying to import an image from file, like so:
import cup from './img/cup.png'
and style it alongside text and everything else contained in the <div> like so:
<div style={{display:'inline-block',
textDecoration:'underline',
cursor:'pointer'}}>
<img src={cup} alt=''/>
<h1 className="title is-4">"Item"</h1>
</div>
But this works badly. Image display is too big.
I would like to reference image right into style and manage 'height' and 'width' (or 'size') within it as well, but haven't found a way.
is this possible? how so?
Try this if you want in vertical
<div>
<div style={{ display: "inline-block",
textDecoration: "underline",cursor: "pointer"}}>
<img
style={{ height: 100 }} src={
"https://www.belightsoft.com/products/imagetricks/img/intro-video-poster#2x.jpg"
} alt=""
/>
<h1 className="title is-4">"Item"</h1>
</div>
</div>
and if you want in horizontal
<div>
<div style={{ display: "flex", textDecoration: "underline", cursor: "pointer"}}>
<img style={{ height: 100 }} src={
"https://www.belightsoft.com/products/imagetricks/img/intro-video-poster#2x.jpg"
} alt=""
/>
<h1 className="title is-4">"Item"</h1>
</div>
</div>
just add height and width size to your image, like this
<img src={cup} alt='' height={50} width={50} />
also, you can add auto to and set the size to another it will work best
<img src={cup} alt='' height={50} width='auto' />
<img src={cup} alt='' height='auto' width={50} />
Basically the first step of you is to learn what a selector is. In short, it is a naming convention to link style with the HTML tag(s)(or dom, whatever). For example, let's say you put a class to the image.
<div>
<img src={cup} alt='' className="my-image"/>
<h1 className="title is-4">"Item"</h1>
</div>
And a CSS file, which you have to import it as a dependency of the component at the header of source file, next to the import cup from './img/cup.png'.
style.css
img.my-image {
// css rules here
}
Then the magic occurs, the CSS rule, e.g., the absolute/relative width/height written in the file will be applied to the image accordingly.
CSS
.image {
height:50px;
}
HTML
<div class='span6'>
<img class='image' />
</div>
<div class='span6'>
<img class='image' />
</div>
Is it possible to cancel the style when the Bootstrap's responsive works?
I need these image to be displayed without crop by CSS, assuming that the picture's height is 400px.
Thank you
You need to surround the images with a maximum width that you wish them to be able to go. Preferably in percentage so that it scales on all devices.
Then add the class="img-responsive" to your image tags.
For example
<img src="/path/to/your/image/logo.png" class="img-responsive" alt="Something about the image">