I am trying to fit images in div. However, the 3rd Image is quite big in height and appears to be big as compared to other Images.
I have tried giving height and width to the 3rd Image but the results are not best looking. Is there any solution to fit the image and make it responsive in same way as other two do?
Here is my Code:
Since you are using Bootstrap 3, you need to add:
.img-responsive
class to your image...
Something like this:
<img class="img-responsive" src="your image">
.img-responsive (Bootstrap 3) is equivalent to .img-fluid in Bootstrap 4.
It will give max-width of 100% to your image, and it will set height to auto - exactly what you want with your image.
Related
So, I have a container div and an Image component in it. I want the image height be equal to the 100% of container height, and the width of container to be automatically decided based on the width of image according to its aspect ratio. When I use a normal img tag, this works without a problem, but in case of Next Image component, the image is left with a width of 0px. Because it wants me to define a fixed width for the container. ? How can I achieve what I want ?
What I'm doing is this:
for the div:
div {
height: 50px;
width: auto;
}
for the Image component:
<Image src="..." alt="..." layout="fill" />
As far as i know, Image in next js has one good great advantage, a lazyload preserving the space the image will use once is loaded without destroying the layout.
Now, that would be impossible if we dont pass the size of the image in advance.
Idk the limits of that. So, i am betting on this reason.
And thats the reason why i use a lot of img, instead of Image. But if you know the exact size... better use Image.
PS. Google developers participated on the feature development i just describe.
I think the most straight forward way is to just define the width of the div in ems or rems and define the same for the image as well so that it is the exact length and the parent element has a ratio with the image and the div itself.
Have a great Day :)
I want to set a responsive image in my webpage using tailwind css. I have provided sufficient classes to make it work on different screen sizes. Now I am getting the following error in page-speed.
How can I eliminate the warning?
Try to use Tailwind aspect ratio.
It work fine
You can eliminate this warning by adding width and height to your images like this:
<img loading="lazy" src="assets/image/brainstorm/svg" alt="brainstorm" width="400" height="200" class="w-5/6 mx-auto" />
Basically adding width and height directly to html img tag prevents layout shifts, even if img is not loaded yet. It's especially important when img is lazy-loaded. More info here
Just adding height and width attributes and classes won't work, you have to crop the images as well to its exact dimension. For example if you have set 100px height and width, the image height and width should also be 100px.
Background
This warning exists to prevent layout shift when images load. Currently, the images have the classes w-5/6 mx-auto. This is enough to make the images responsive, but before the images are loaded, the browser doesn't know how tall the image is. Hence, when the image loads, there will be layout shift.
You then need to tell the browser how wide and tall the image should be before it loads. There a few ways of doing this.
With known dimensions
If you know the height of the image, I'd recommend following fromaline's answer.
<img src='assets/image/brainstorm.svg' alt='nature' class='w-5/6 mx-auto border' width='300' height='300' />
Because we've defined the display width with w-5/6, the image will be responsive. The width='300' and height='300' properties are then used for the aspect ratio.
Here's a link from the Tailwind playground to show you how it's both responsive and removes layout shift: https://play.tailwindcss.com/rjz9ylFNl5?size=482x720
With unknown dimensions
If you don't know the width and height of your images and you need them to be responsive, you need to essentially create a container with a fixed aspect ratio. I'd recommend looking at the aspect ratio plugin.
<div class='w-5/6 aspect-w-16 aspect-h-9 mx-auto'>
<img src='assets/image/brainstorm.svg' alt='nature' class='object-cover w-full h-full' />
</div>
Again, a link to a Tailwind Playground demo: https://play.tailwindcss.com/2zmPJixbrO?size=584x720
Im trying to build some fancy item grid by using bootstrap and flex. Therefore the item image always has to extend to 100% width of available space by keeping the 1:1 ratio.
http://www.bootply.com/kPLGHtA7Kh
I got it to work by using the css background image. But I struggle to make it look the same by using an img-tag. Im running out of ideas, hope you can help me.
In your CSS just specify the width: 100% on your image and don't touch the height (or set it to auto which is the default).
The parent of your image should also have a position:absolute or position:relative in order for the width to work properly
Demo : http://jsfiddle.net/s3spdy5z/
I think the images are pushing the width of the boxes to the max-width so kind of overriding the flexbox settings. With the background images you basically don't have any content inside them so flexbox can calculate the widths and not worry about content. The images are set to 100% but it thinks you want 100% of the max-width therefore the grid doesn't fit anymore.
If you set width: 33%; on the .flex-item and remove the min and max the grids will look the same.
I have a div with 1184x308px and inside I have dynamics images logo (vertical and horizontal). How can I do to the image fill the div without stretch?
If your image is not big enough to fill the space as it seems you want then you cannot just simply have css styles with width: 100% height: auto; without stretching it. One option you could use to serve the right image at the right screen size is using srcset but it is not too well supported and you will probably want to use picturefill
To use srcset on it's own you would use this:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="dynamics">
It can be a bit tricky but a quick google on srcset should help you out or this is good info on it.
OK so my brain is just probably not working tonight. What I'm trying to accomplish is a two column layout where one column scrolls and the other is fixed. The fixed column has a very large background image in it that I would like to be able to scale to the size of the screen. Additionally the left (fixed) column's width would have to scale to accommodate the background image. The best way to really explain this is with a picture:
The highlighted area with the arrow in it will scroll and the other column with the picture and twitter status in it would remain fixed. My problem does not come into play with the fixed CSS positioning. My issue is with scaling my columns based on screen size so that the picture always remains in the proportion it's shown here both in it's own dimensions and those of the other column. That's what I'm stuck on. Any ideas? I really appreciate the help.
I think you can just use an image element in your first column and set it to take 100% of its parent. If the parent div is also a percentage then its size will change of course and that also scales the image within. If we want the image to scale, then we can't also specify a height.
<div id="parent" style="width: 40%">
<img id="child" style="width: 100%" src="http://i.stack.imgur.com/lvvrv.png" alt="Fake Background" />
</div>
Check your JS FIDDLE CODE HERE : http://jsfiddle.net/4P9fJ/7/
Since you din't mention you'd be changing the images in your background i provided the background image in the body tag .