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
Related
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
Bootstrap: How can set an image on another image.
I used jumbotron and set an image on it then use a logo image?
The big one is a banner image on the jumbotron and over a logo image. I need both is responsive on different sizes on screen.
<div class="jumbotron " style="min-height: 250px">
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="logo1.PNG" />
</div>
</div>
</div>
my image does not display as the true size, I've also tried to embed height and width but that does not work either. any idea of the proper code to get my .png to display as the original size?
my code is ----->
<div class="divPanel notop nobottom">
<div class="row-fluid">
<div class="span12">
<div id="divLogo" class="center">
<a href="index-alt.html" id="divSiteTitle">
<img src="images/logo.png" alt="Tech Mule" class="img-circle" title="Tech Mule"/>
</a>
</div>
</div>
</div>
</div>
I am trying to put 3 images into 3 boxes.Here I have used bootstrap v3.1.1, here the problem is image is not centering correctly.My medium device output like bellow image
Here no any problem for medium device but the problem is in small device this is looking like bellow image
Here image is not cantering.
I have add bellow html code and a css code
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<!--------------------------->
<div class="main-box">
<div class="box" >
<div class="box1 box sides-hz-2">
<img src="images/sss.png" class="img-responsive"></img>
<div class="list1">
<li class="header1"><Strong>Select</Strong>
</li>
</div>
</div>
<div class="box1 box sides-hz-2">
<img src="images/uuu.png" class="img-responsive"></img>
<div class="list1" style="background:#8C7E63;">
<li class="header1"><Strong>Online</Strong>
</li>
</div>
</div>
<div class="box1 box sides-hz-2">
<img src="images/uuu.png" class="img-responsive"></img>
<div class="list1">
<li class="header1"><Strong>Import</Strong>
</li>
</div>
</div>
</div>
<!--------------------------->
</div>
</div> <!--end of grid -->
</div> <!----end of row ------->
</div> <!----end of continer ------->
Here my own css for image
div.box1 img
{
display:block;
margin-left:25%;
}
May anybody help me for fix this problem ?
You must make the image responsive by adding these properties to img class
.responsive-image{
height:auto;
width:100%;
}
Auto height makes sure of resizing image without losing the aspect ratio
If you are using bootstrap, it has class img-responsive which will take care of responsiveness of the image.
Tip : On resize the image tend to resize and shrink. To make it look nice you can add class center-block to keep the image in center of outer div :-)
I've a fluid row in which i have a item (nontext) and I want to align it horizontal centered
text
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" style="text-align: center">
<img src="#Url.Content("~/Images/Domain/IMG_1710.jpg")" />
</div>
</div>
</div>
this works pretty fine
but as soon as I add a max-width and max-height the alignment doesn't work anymore.
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" style="text-align: center;max-height: 300px; max-width: 400px" >
<img src="#Url.Content("~/Images/Domain/IMG_1710.jpg")" />
</div>
</div>
What am I doing wrong ? How can I set max width and hight and have a centered alignment?
To follow bootstrap rules, try to center it with the offset class
<div class="row-fluid">
<div class="span4 offset4">
<img src="yourimage" />
</div>
</div>
see documentation
Applying max-height and max-width on one of Bootstrap's span# classes will override grid styling. I would recommend adding the height/width on the image (if the text align doesn't work, you can try margin: 0 auto on the image.