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.
Related
I'm trying to use the Next.js' <Image> component with the layout=fill option. Therefore I've created a relative div that contains the Image tag. But I'd like to determine the height by the Image height.
Found this example but height is statically given there. So I've tried this based on the example.
<div className="relative w-full h-full">
<Image
src={post.coverImage.url}
layout="fill"
alt={post.title}
/>
</div>
I've also tried h-full or max-h-full classes instead of h- tags but couldn't succeed.
How can I make its height automatically determined?
I had the same issue and figured it out after inspecting the element. The problem is how Image component takes place in DOM.
This the Image component on DOM, look there are 2 divs and inside "img" is placed. So you have to target the outer div that wraps img.
// I add img-wrapper class
<div className="relative w-full h-full img-wrapper">
<Image
src={post.coverImage.url}
layout="responsive"
alt={post.title}
/>
</div>
and in css:
// targeting the first div
.img-wrapper > div {
// this will take full-height, u can adjust it
height: 100%;
}
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 have a web application layout like this, styled with Bootstrap:
------------------------
| Header |
------------------------
| Display Area |
------------------------
The Header is a collection of control elements (mostly buttons) and therefore almost of same height.
The Display Area contains the following:
<div class="row">
<div class="col">
<img class="img-fluid" src="http://localhost/api/currentImage" />
</div>
</div>
http://localhost/api/currentImage returns an image. The image's size always differs: sometimes the width is bigger than height, sometimes vice versa.
Now I'd like to scale the image in that way that it uses as much as possible of the available Display without "overflowing". By overflowing, I mean that there is never a need to show a horizontal or vertical scroll bar because the image is too wide or too high. Right now, <img class="img-fluid" ... only scales the width correctly.
How can I achieve this using Bootstrap/CSS?
Bootstrap will let you resize images with its img-fluid class, but if you need to make the image cover the entire space you would have to write your own CSS, you could make use of the object-fit property to set the image to fill the container, while maintaining its aspect ratio and clipping off if necessary;
As you can see in the example below, the image is narrow, but it will fill the entire container even if it has to expand to do so.
EDIT: Included two more examples with fill and contain so you can see how their behavior changes.
header {
border: 1px solid red;
padding: 10px;
}
section {
border: 1px solid blue;
}
img {
height: calc(100vh - 20px);
width: 100%;
/* This is just to remove a blank space at the bottom of the image */
display: block;
}
img.cover {
object-fit: cover;
}
img.contain {
object-fit: contain;
}
img.fill {
object-fit: fill;
}
<header>
This is a header
</header>
<section>
<img class="cover" src="https://via.placeholder.com/200x700" />
</section>
<section>
<img class="contain" src="https://via.placeholder.com/200x700" />
</section>
<section>
<img class="fill" src="https://via.placeholder.com/200x700" />
</section>
Bootstrap has a predefined classes for responsive image. Check the following class,
.img-responsive Makes an image responsive (will scale nicely to the parent element)
<div class="row">
<div class="col">
<img class="img-fluid img-responsive" src="http://localhost/api/currentImage" />
</div>
</div>
`
I have a bootstrap column defined as follows:
<div class="col-md-4 limit">
<img id="myImage" src="" class="img-responsive"/>
</div>
<style>
.limit {
max-height:500px;
overflow:hidden;
}
</style>
The source of the image is obtained programatically so I do not know in advance the height or width of my image. What I want to do is that the image in this column whose height is limited appear completely inside of the div. With the img-responsive class I have achieved the image to horizontally fill my column, however, as this class also sets the height to auto, most of the time this causes the image to overflow and be hidden. I do not want my image to overflow in any way.
So, lets say that my column measures:
Width: 300px (defined by bootstrap)
Height: 500px (.limit)
And my image dimensions are:
Width: 600px
Height: 1500px
The current configuration makes the image shrink to 300px x 750px. As its container is set to only 500px, this causes the last 250px to be lost inside the overflow. I would like to image instead to be resized to 200px x 500px in order for it to completely into the containing div
How can I do this?
Thanks!
Try this:
<div class="row">
<div class="col-md-4">
<div class="limit">
<img src="images/yourimage.png" alt="" />
</div>
</div>
</div>
<style type="text/css">
.limit{
width: 300px;
height: 500px;
max-height: 500px;
overflow: hidden;
}
.limit img{
width: 100%;
height: 100%;
}
</style>
You could try to inherit the height or the width of the parent div (as both would not contain proportions). This could only work if you have the same type of img (all portret or landscape). Other solution is to calculate the dimensions based on the max width/height of the img in your program language. Pick the one that matches the condition (both var <= max value). Then echo the solution in your html.
#Luis Becerril I normally used this plugin with those type of issues. Please try this. If may suit to your requirement. jQuery Image Center
Simplest way in Bootstrap 4
<div class="row">
<div class="col-md-4">
<img src="images/yourimage.png" alt="" class="w-100" />
</div>
</div>
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;
}