Changed the height of the flexbox (h-40) and set the image height to full (h-full). In this case the height of the image changes and fills the entire container, keeps the aspect ratio which is good and expected.
But the container div (with blue background) does not change in width, just in height.
How can I make this div to be as same width as the image?
https://codepen.io/lordjancso/pen/eYKOVRN
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row justify-around h-40">
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
</div>
Apply the w-fit utility on the images' container. w-fit, which is the width: fit-content; class in CSS, will use the available space, but never more than max-content.
<div class="flex flex-row justify-around h-40 w-fit">
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
</div>
Tailwind-play
Related
I'm having immense trouble understanding the concept of div height and overflow. Been searching for two days but I think I'm missing a key concept here...
My layout looks like this (Tailwind Playground):
The blue div does not scroll all the way to the end of the content. For some reason the div thinks that its height is larger than it really is (by exactly the height of the second navbar (red) on top of it). As a result, I can't scroll all the way to the bottom.
Also, having to repeat h-full for each child div until I reach the div that I want to be scrollable seems off to me but otherwise it assumes h-auto which is not good.
<div class="h-screen overflow-hidden">
<div class="flex h-full flex-col overflow-hidden">
<div class="w-full bg-slate-500 text-center text-white h-12 ">NAVBAR</div>
<div class="flex h-full overflow-hidden">
<div class="flex h-full basis-1/6">
<div class="w-full bg-gray-300 text-center text-black">Sidebar</div>
</div>
<div class="flex h-full grow flex-col bg-slate-500">
<div class="h-12 w-full shrink-0 bg-red-400 text-center">Second Navbar</div>
<div class="h-full w-full grow bg-green-400">
<div class="flex h-full">
<div class="w-1/3 bg-blue-400 text-center">
<div class="flex h-full flex-col overflow-y-scroll">
<div>
Lorem....
</div>
</div>
</div>
<div class="h-full w-2/3 overflow-y-scroll bg-orange-400 text-center">Main content</div>
</div>
</div>
</div>
</div>
</div>
</div>
Lets look at the container(blue parent) under the second navbar. Its parent (the parent of the second navbar as well) have a height of about 831px. The navbar height is 3rem - which is about 48px.
But the blue parent has a height of 100% (of its parent) ~ 831px. So its basically overflowing (because 831+48 != 831).
If you put the overflow:hidden on the blue parent it'll hide the overflowing and blue container will scroll normally.
https://play.tailwindcss.com/SOO2rwiGsw
I have let my user select an image preview in div, and then crop an area to upload an image.
Now I have a problem with how to show the image's actual size in a div with Tailwind-CSS.
For example, a.jpg size is 3000px X 2500px.
<body class="antialiased">
<div class="w-2/3 mx-auto">
<div class="relative overflow-auto">
<img src="/a.jpg" class="w-full" alt="">
</div>
</div>
</body>
The size of the image is reduced to fit inside the div, so overflow-auto didn't work.
I want to show both x and y scrollbars, can anyone help?
Thank you.
Apply h-max and w-max to the image's container. This way, your container will always scale according to the image's width and height.
Example:
<body class="antialiased">
<div class="h-max w-max">
<img src="https://s1.1zoom.me/big3/371/363095-commander06.jpg"/>
</div>
</body>
Tailwind-play
If you don't want to change your layout, you can create another separate container for the h-max and w-max utilities:
<body class="antialiased">
<div class="mx-auto w-2/3">
<div class="overflow-auto">
<div class="h-max w-max">
<img src="https://s1.1zoom.me/big3/371/363095-commander06.jpg" />
</div>
</div>
</div>
</body>
Tailwind-play
You can also limit the area by adding custom width and height to the middle container:
<body class="antialiased">
<div class="mx-auto w-2/3">
<div class="overflow-auto h-[300px] w-[500px]">
<div class="h-max w-max">
<img src="https://s1.1zoom.me/big3/371/363095-commander06.jpg" />
</div>
</div>
</div>
</body>
Tailwind-play
I have 1 div with exact width 300px and if the window size is less than that I want to be a scrollable herizontally , I've use overflow-x-auto but It still not working and that div is getting smaller as window size here's my code
<div>
<div className="flex h-screen overflow-scroll">
<div className="bg-red-400 w-[200px] ">
<input type="number" className="p-1 rounded m-2" />
</div>
<div className="bg-blue-300 w-[100px] sm:w-full sm:bg-red-500">
<Select
className=" m-2 "
defaultValue={selectedOption}
onChange={setSelectedOption}
options={options}
/>
</div>
<div className="bg-gray-200 w-[300px] overflow-y-scroll ">
{result}
</div>
</div>
</div>
You're setting fixed widths on elements that are within a flex container. When the parent container shrinks, child elements will scale accordingly.
Set flex-none on elements that should remain at a fixed size, regardless of the space available.
<div className="bg-gray-200 flex-none overflow-y-scroll w-[300px]">
I have a div with 5 child divs. There is no content, it's just there to visually display a percentage. I have set a width and height on the parent and I want to find the easiest way to make the children equally fill that width. I can do this by adding flex-grow to each child but ideally I'd love to be able to control that from the parent.
NB: Code is using tailwindcss
<div class="flex w-64 h-2">
<div class="flex-grow mr-1 rounded-l-lg bg-blue-dark"></div>
<div class="flex-grow mr-1 bg-blue-dark"></div>
<div class="flex-grow mr-1 bg-blue-dark"></div>
<div class="flex-grow mr-1 bg-blue-dark"></div>
<div class="flex-grow rounded-r-lg bg-gray-lighter"></div>
</div>
You have "flexbox" in title but you did not mentioned in question that you actually you are forced to use flexboxes, just need to achieve equal divs.
So the best approach will be using grid instead of flex, because it is just designed for that.
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-flow-col w-64 h-2">
<div class="bg-blue-500"></div>
<div class="bg-red-500"></div>
<div class="bg-green-500"></div>
<div class="bg-orange-500"></div>
<div class="bg-gray-500"></div>
</div>
I have image that have space when i look at device with resolution sm and xs how to make it fit with the grid?
here is my code
<div class="container">
<div class="row">
<div class="col-md-7">
<img src="http://placehold.it/550x350" class="img-responsive">
</div>
<div class="col-md-5">
<h2>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</h2>
<p>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</p>
</div>
</div>
</div>
from the resolution 991px to 581px I get blank space from image (like it didn't fit to the grid)
http://www.bootply.com/10CUN9fXqG#
How do I fix it?
I would just add width: 100%; to your image
May be it will be your solution code:
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<img src="http://placehold.it/550x350" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-md-5">
<h2>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</h2>
<p>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</p>
</div>
</div>
</div>
You're not using bootstrap classes for sm and xs screens, use that as well as change the img from max-width to width.
img{
width :100%;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-7">
<img src="http://placehold.it/550x350" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-12 col-md-5">
<h2>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</h2>
<p>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</p>
</div>
.img-responsive {
margin: 0 auto;
}
Try adding custom styling