I am trying to make a bootstrap carousel in a react project and the carousel keeps jumping between images. I believe the reason for this is because the images are big, and I am just resizing them to have them fit nicely in the carousel. It only happens once which is I believe it is due to the resizing since they would have been resized once it loads the first time. I have also tried commenting out the resizing and see how the images load and while they are giant, they do smoothly transition between each other.
I have tried using the bootstrap class "img-fluid". And have also tried writing my own CSS to resize it how I want. Neither have worked for me though.
React code:
<Carousel className={classes.carousel}>
<Carousel.Item>
<img
src={image1}
alt="image1"
className="img-fluid"
/>
</Carousel.Item>
<Carousel.Item>
<img
src={image2}
alt="image2"
className="img-fluid"
/>
</Carousel.Item>
<Carousel.Item>
<img
src={iamge3}
alt="image3"
className="img-fluid"
/>
</Carousel.Item>
</Carousel>
CSS code:
.carousel {
max-width: 60%;
height: auto;
margin: 0 auto;
}
.carousel img {
max-width: 100%;
height: auto;
border-radius: 6%;
}
If anyone has any ideas for a workaround this or if this is not actually what's happening I would appreciate that.
Related
I wrote inline styling on img tag. But it is not working in a mobile browser.
<img
ref={...}
loading="lazy"
className="rounded mx-auto d-block"
src={...}
alt="..."
style={{
width: '100px',
padding: '20px',
objectFit: 'contain',
}}></img>
for debugging when I open the developer tool, I couldn't find my styling there. which is not for only this image all images have the same problem. where I am using inline styling.
<img loading="lazy" class="rounded mx-auto d-block" src="..." alt="...">
this is what looks like, styling disappeared from img tag.
Also, I am getting this error in the production project only, in development is it working fine.
What I have tried
update <meta tag>
I am not using any media query I make sure
it's inline styling so it should have more important than another styling like external CSS files.
I clear my cache and try to run in incognito but same error.
It is a very simple mistake. Your inline css style syntax is just invalid style={{ width: '100px', padding: '20px', objectFit: 'contain', }}. You can't use curly braces in style property. It's just colons and quotes. The right syntax is style="width: 100px; padding: 20px; object-fit: contain".
I am trying to add some small .png icons in a horizontal row in a main container. I am struggling to figure out the easiest way to go about doing this
Here is a code sandbox of what I have created so far
https://codesandbox.io/s/broken-dew-76c4rf
I have been struggling with this for a while now and I cannot seem to get it. I have tried creating a div, inserting tags in the div but I don't think this is correct. Any help is greatly appreciated!
Do like this
First import the img_path at the top
import imgurl1 from "../public/img/aws.png";
import imgurl2 from "../public/img/c.png";
import imgurl3 from "../public/img/java.png";
Then define a div with style flex flex-direction:row like this
<div className="img-container">
<div className="img">
<img src={imgurl1} alt="aws" />
</div>
<div className="img2">
<img src={imgurl2} alt="c" />
</div>
<div className="img3">
<img src={imgurl3} alt="java" />
</div>
</div>
and style like this
.img-container {
display: flex ;
flex-direction: row ;
}
.img1, .img2 ,.img3 {
/* any style for the images */
background-color: black;
}
Just set the style from the div with the images to display: 'flex', flex-direction: 'row'
I am trying to use the Next.js Image component with images that all have unique sizes. Their example states the image will stretch to the parent div width and height. I've tried wrapping them but don't know how to accommodate dynamic image sizes. I want to have a set width and the height to adjust to each respective proportion. TIA.
Here is my code (the images are coming from an array) -- since I don't have a height set nothing renders on the page. If i use Tailwind's h-auto it still does not display:
<div className="w-screen h-screen">
{allImages.allImages.map((image, i) => {
return (
<div className="relative w-100 md:w-5/6 lg:w-7/12" key={image}>
<Image priority src={`/${image}`} layout="fill" objectFit="cover" />
</div>
)})}
</div>
I found a solution in this article which seems to work.
<div className="image-container">
<Image src={path} layout="fill" className="image" />
</div>
SCSS
.image-container {
width: 100%;
> div {
position: unset !important;
}
.image {
object-fit: contain;
width: 100% !important;
position: relative !important;
height: unset !important;
}
}
I wrapped this in a component named <ResponsiveImage />. You can try other rules on the wrapper, such as position: relative.
You can use these props on the Image tag,
<div className="div-class">
<Image src={imageLink} layout="fill" objectFit="cover" />
</div>
and wrap the Image tag in a div, just as above. Now you can give width and height to the div with media queries and the image will use that space.
First off - this is my first question ever (I'm still a beginner) and I can't say how much I appreciate this site and all the help I've found on here. Hopefully every question I ask can help someone else too :)
I realize not many people use imagemaps any more but I have one and twitter bootstrap (version 3.0.0) is screwing up my coordinates - putting the links in the wrong places. I can make it work with the following code but then it wont resize to fit the screen. Any tips?
<style>
<!Driving me nuts - without this the imagemap links are in the wrong places - with this it wont resize>
#img_ID {
max-width:none;
width:auto;
display: inline;
}
</style>
Here is a snippet of the actual imagemap code
<div style="width:100%">
<img id="img_ID" src="NewMatGuide.png" USEMAP="#map" border="0" class="" width:100% alt="">
</div>
<Map id="map_ID" name="map">
<AREA shape="RECT" COORDS="80,151,258,252" HREF="PlacementResults.php?ChosenArea=A">
<AREA shape="RECT" COORDS="80,328,258,432" HREF="PlacementResults.php?ChosenArea=B">
<AREA shape="RECT" COORDS="80,521,258,620" HREF="PlacementResults.php?ChosenArea=C">
I'd recommend, rather than an image map, make 3 divs that are links with the following HTML and accompanying CSS.
<div id="box_a">
<a class="box_link" href="PlacementResults.php?ChosenArea=A"></a>
</div>
<div id="box_b">
<a class="box_link" href="PlacementResults.php?ChosenArea=B"></a>
</div>
<div id="box_c">
<a class="box_link" href="PlacementResults.php?ChosenArea=C"></a>
</div>
Use percentages to define the coordinates. Given that your X1 and X2 coordinates are the same for the links in your image map, the following example (with different %s to actually cover your image correctly) should work.
#box_a, #box_b, #box_c {
margin-left: 10%;
margin-top: 5%;
height: 15%;
width: 25%;
}
.box_link {
display: block;
height: 100%;
width: 100%;
}
You should check out this page to learn more about making div links. I would also suggest using NewMatGuide.png as a background-image and define the size of #img_ID.
I am creating an email flyer and I have multiple images that I want at 140px by 140px but some are originally 300x300 or 400x400. I don't want to go resize each image as there can be quite a few and the flyer will be a weekly update so is it possible to use CSS to tell all images (or images that have classes) to resize to 140px?
I was going to post some code but it's quite a vague request so there no relevant code I can show to help my question.
maybe if I <span>...</span> and then give the span a class, would it be possible this way?
if your markup is for a newsletter you may force dimensions both with style attribute and with inline width and height attribute, e.g.
<img src="..." style="width:140px; height:140px" width="140" height="140" />
but, anyway, I strongly suggest to perform some kind of batch task for automatic resize of the images (e.g. using GruntJS), so you could save some precious bandwidth on the server in which you store your static assets. (conversely, if you embed images into the email, users will appreciate a lighter size)
Yeah add class to span and then:
span.yourclass img {
width: 140px;
}
I think I might be understanding this, but some simple css should work :
css :
img.small {
width: 140px;
height: 140px;
}
OR if you want to do all img's under a specific element :
.thumbs img {
width: 140px;
height: 140px;
}
html :
<img src="pic.jpg" class="small">
<div class="thumbs">
<img src="pic.jpg">
<img src="pic.jpg">
<img src="pic.jpg">
</div>
Or if they are dynamically generated, you can eliminate the css and just go :
<img src="pic.jpg" width="140" height="140">
You can set width and height for all images. Add "max" keyword to be sure.
img{
max-width:140px !important;
max-height:140px !important;
}
If you simply want ALL images on the page to resize, add the following into your CSS:
img{ width: 140px; }
This will proportionally set the height/width and I'm assuming all you images are square ?
If not, add 'height: 140px' but this will distort an image that isn't square.
wrap your images with div.class then write a single css to resize all the images which are wrapped by that div
MARK-UP::
<div class="imageWrapper">
<img src="/path/to" />
<img src="/path/to" />
<img src="/path/to" />
</div>
CSS::
.imageWrapper{
overflow:hidden;
}
.imageWrapper img{
width:400px;
height:400px;
}