CSS - div width depending on image size above
the problem with your request is that if the div doesn't have a specific width the text doesn't "know" when to wrap and that's why it uses the width of the outter div...
So... You need to add a width to the outter div or in case of using a div that surrounds the image + text, a width in that div.
EDIT:
here you go:
http://jsfiddle.net/jnmtu/
I made a test (on my example is the third one) with a table to test it first and to refresh my mind of how it works with tables, and then I applied it to the CSS way.
How it works:
You need to have a surrounding div that has a minimal width (1%), and make it display as a table; then the inner div (corresponding to the "cell") should have an auto height and hidden overflow, this is needed to "force" it to strech the div's width + height (it's a common trick).
NOTE: I haven't tested in Internet Explorer, it does work with Firefox and Safari.
How do I auto-resize an image to fit a 'div' container?
Do not apply an explicit width or height to the image tag. Instead, give it:
max-width:100%;
max-height:100%;
Also, height: auto;
if you want to specify a width only.
Example: http://jsfiddle.net/xwrvxser/1/
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Div width depending on image width that is inside it
Make the images display: block
. <img>
elements are inline by default.
Live demo: http://jsfiddle.net/szPdR/1/
For IE support and other tricky browser use jQuery, see this FIDDLIE
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/
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 fix the image to a div when it's height is greater than its width?
If your parent div
has fixed dimensions you can use CSS to scale images while maintaining the aspect ratio for both landscape and portrait photos.
The images will always fit inside the div.
.container {
width: 400px;
height: 400px;
text-align: center;
background: red;
}
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
<h1>Landscape</h1>
<div class="container">
<img src="https://unsplash.it/1600/800">
</div>
<h1>Portrait</h1>
<div class="container blue">
<img src="https://unsplash.it/800/1600">
</div>
resize div depending on an image size using jquery
You should just trigger load
event of image
.
$(document).ready(function () {
$(".image").load(function () {
var image_h = this.height,
image_w = this.width;
//Use prev to find previous overlay
$(this).prev(".overlay").height(image_h).width(image_w);
});
});
$(window).on('resize', function () {
$(".image").trigger('load'); //Trigger load event of image
}).trigger('resize');
DEMO
Related Topics
How to Vertically Center Align a Position:Relative Element
How to Change Background-Color on Text Links on Hover But Not Image Links
Make Div Inside Parent 100% Width of Body, Not Parent Div
Border-Radius CSS Property Curve Outside
Center Align Position Absolute Object Horizontally
Prevent Child Div from Overflowing Parent Div
In Less CSS How to Get Less to Watch a Bunch of Files But Compile a Different File When They Change
How to Prevent Child's Content from Stretching Parent's Width
What Happens If Multiple Classes of the Same Element Define a :Before Pseudo-Element
Animate Transform Only One Property (Scale) Override Other (Translate)
Bootstrap 3: Can the Glyphicons Be Stacked Like Font Awesome's Icons
How to Create a Border That Fully Covers the Adjacent Corners in CSS
Stop Animation and Start Transition on Hover
Flex Box Container Width Doesn't Grow
Crispy-Forms: Add CSS Class for One of the Inputs
Put a Logo on Twitter Bootstrap Navbar Without Resizing the Navbar