Set the height of an image to match the height of the text next to it
The answers I had received all had flaws in them which I discovered (such as if the page width was decreased, the image would be messed up) and overall, they were over-complicated.
After some research, a help from a friend who I 'collaborated' with over JsFiddle and a subsequent question which I posted, I have this code which solves my question of how to set the images's height the same as the adjacent text to it:
$("#here").find('img').css("height", $(".text").outerHeight());
var $img = $("#here").find('img');$img.on('load', function() { $("#here").find('img').css("height", $(".text").outerHeight());});
window.onresize = function() { $("#here").find('img').css("height", $(".text").outerHeight());}
img { float: left;}p:last-of-type { margin-bottom: 0px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="here"> <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" id="img"> <div class="text"> <h2>Example</h2> <p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example</p> <p>Example Example</p> <p>Length: 111 min</p> <p>Example Example Example</p> <p>Example Example Example Example Example Example Example Example Example Example Example</p> </div></div>
Variable image height based on content height
OK. that answear would be very short:-) You have to add only h-auto
in this line:
<div className="bg-rose-400 h-fit md:w-1/2 flex flex-col p-4 md:p-6 h-auto">
working example
https://play.tailwindcss.com/GdVJp8k9zA
CSS: How can I set image size relative to parent height?
Original Answer:
If you are ready to opt for CSS3, you can use css3 translate property. Resize based on whatever is bigger. If your height is bigger and width is smaller than container, width will be stretch to 100% and height will be trimmed from both side. Same goes for larger width as well.
Your need, HTML:
<div class="img-wrap">
<img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/200/300/nature/" />
</div>
And CSS:
.img-wrap {
width: 200px;
height: 150px;
position: relative;
display: inline-block;
overflow: hidden;
margin: 0;
}
div > img {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
}
Voila! Working: http://jsfiddle.net/shekhardesigner/aYrhG/
Explanation
DIV is set to the relative
position. This means all the child elements will get the starting coordinates (origins) from where this DIV starts.
The image is set as a BLOCK element, min-width/height
both set to 100% means to resize the image no matter of its size to be the minimum of 100% of it's parent. min
is the key. If by min-height, the image height exceeded the parent's height, no problem. It will look for if min-width and try to set the minimum height to be 100% of parents. Both goes vice-versa. This ensures there are no gaps around the div but image is always bit bigger and gets trimmed by overflow:hidden;
Now image
, this is set to an absolute
position with left:50%
and top:50%
. Means push the image 50% from the top and left making sure the origin is taken from DIV. Left/Top units are measured from the parent.
Magic moment:
transform: translate(-50%, -50%);
Now, this translate
function of CSS3 transform
property moves/repositions an element in question. This property deals with the applied element hence the values (x, y) OR (-50%, -50%) means to move the image negative left by 50% of image size and move to the negative top by 50% of image size.
Eg. if Image size was 200px × 150px, transform:translate(-50%, -50%)
will calculated to translate(-100px, -75px). % unit helps when we have various size of image.
This is just a tricky way to figure out centroid of the image and the parent DIV and match them.
Apologies for taking too long to explain!
Resources to read more:
- https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
- https://css-tricks.com/centering-css-complete-guide/
Nextjs Image component and setting width and height with CSS
Adding a wrapper div with the size and relative
classes and then setting layout="fill"
on the Image component should do the trick.
Example:
<div className="h-64 w-96 relative"> // "relative" is required; adjust sizes to your liking
<Image
src={img.img}
alt="Picture of the author"
layout="fill" // required
objectFit="cover" // change to suit your needs
className="rounded-full" // just an example
/>
</div>
Source: https://techinplanet.com/how-to-use-tailwind-css-with-next-js-image/
Setting a div to be the same height as an image
You can use Flexbox
body, html {margin: 0; padding: 0}.content { display: flex;}.text { background: #333333; color: white; flex: 1; margin: 10px;}.image { flex: 2; margin: 10px;}img { width: 100%; vertical-align: top;}
<div class="content"> <div class="image"> <img src="http://placehold.it/900x450"> </div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, id.</div></div>
How to get div height to auto-adjust to background size?
Another, perhaps inefficient, solution would be to include the image under an img
element set to visibility: hidden;
. Then make the background-image
of the surrounding div the same as the image.
This will set the surrounding div to the size of the image in the img
element but display it as a background.
<div style="background-image: url(http://your-image.jpg);">
<img src="http://your-image.jpg" style="visibility: hidden;" />
</div>
How to make NextJS Image component 100% height and width for its parent div?
Ok, I see that you want the image to take the width and height of its parent element, you can just use layout="fill"
instead of responsive
, which causes the image to expand to fill its parent element.
Something like this:
<div style={{width: '100%', height: '100%', position: 'relative'}}>
<Image
alt='Mountains'
src='/mountains.jpg'
layout='fill'
objectFit='contain'
/>
</div>
Related Topics
CSS Not Loading in Firefox, Opera and Ie - Chrome and Safari Works Just Fine
CSS: Fix The Height of a Section Within a Variable Height Element
Class Selector Not Working in CSS, But Id Works for Add Some Styles
How to Select Element with Specific Content or Attribute in CSS
Is There Any Possibilty Using CSS-Variables in Sass
If I Use .Container-Fluid in Bootstrap 3, Does That Mean I Need to Use Grid Classes
Why Use Ems for Padding & Margins with Browsers Now Scaling Correctly
Ie 8. Gradient Background+Image
Is There a Way in CSS to Move an Element in The Dom
How to Get Linear Gradient Effect on Mozilla Firefox
How to Make The Elements Cover 100% of The Space Available in a Container Using Flexbox
Li:Before{ Content: "■"; } How to Encode This Special Character as a Bullit in an Email Stationery
Change Text-Align Responsively (With Bootstrap 3)
One CSS File or Individual CSS Files for Each Page
Does The Order of Styles Matter
Bootstrap 3: Using Img-Circle, How to Get Circle from Non-Square Image