I often find myself using code blocks for inline article images like the following:
...article text.
<div class="article-image right" style="width: 250px;">
<img src="..." width="250" alt="" />
<p class="caption">Potentially long image caption</p>
</div>
More article text...
Or, the more succinct HTML5 version:
...article text.
<figure class="right" style="width: 250px;">
<img src="..." width="250" alt="" />
<figcaption>Potentially long image caption</figcaption>
</figure>
More article text...
Since I use a CMS that processes images on the fly, I've been defining the size of the image (250px in this case) dynamically, and I've also been applying that size restriction to the parent element that contains both the img and its caption. This way, the caption never increases the size of the parent element beyond the defined width of the img tag.
My question is if there is some CSS trick I can apply to one of the elements that will accomplish the same thing without manually defining the width? Some way to prevent the captions from expanding their parent element in width, yet allowing them to influence the height? Of course the parent element's width still needs to adapt to the img's width...
To stop children elements from affecting parent width apply this to the child:
min-width: 100%;
width: 0;
This gets around solutions using absolute positioning.
For vertically lining them up, also use:
vertical-align: top;
JSFiddle: http://jsfiddle.net/ETkkR/87/
CSS code to div or figure element is alone enough.
style="width: 250px;
**max-width:250px;"**
This will set static width to the div or figure tag even when the width of the image is higher
Related
there is a certain CSS behaviour that I want to understand better. It's not related to a concrete problem, I just encountered it while debugging a website.
Let's have a full width image in a fixed positioned div.
<div style="position:fixed">
<img
style="width:100%"
src="https://via.placeholder.com/150x300.png"
/>
</div>
This renders the image in its original size. So my assumption is, the browser looks through the ancestor elements of the image until it finds one with defined width. But it stops at the fixed positioned div and can't obtain any results, so it lets the image have its own width.
But then, why does the following render the image at width 0?
<div style="position:fixed">
<div style="position:absolute">
<img
style="width:100%"
src="https://via.placeholder.com/150x300.png"
/>
</div>
</div>
According to my logic, the browser should look at the absolutely positioned container, but it has no width set, so it looks further and ends up at the fixed positioned container, from which it should obtain the same width (auto or undefined?) as in the first example?
Also, I couldn't replicate this behaviour with something other than images. Do images behave somehow special in CSS?
[EDIT] I also don't understand why the following results in the image having its own size and not taking up the full viewport width:
<div style="position:fixed;width:100%">
<div style="position:absolute">
<img
style="width:100%"
src="https://via.placeholder.com/150x300.png"
/>
</div>
</div>
What you are facing is called "cyclic dependency" related to how percentage works. In the specification you can read:
Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency
It's a bit tricky to follow that specification so I will try to use easy words. It's clear that width:100% on the image means 100% of the parent element (containing block) BUT your containing block is a position:fixed so its width is also based on its content so we have a cycle.
In such case, the browser will first ignore the percentage width and consider it as auto (so your image will get its initial width) to define the width of the parent element.
The width of a fixed element element is defined here: https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width (absolute and fixed follow the same rules)
If you read the different cases you will end with the shrink-to-fit algorithm to define your width:
min(max(preferred minimum width, available width), preferred width).
What is important to note here is the "available width" which is big enough in your first example so the "preferred width" is the one used.
So the browser will set the width of the fixed element to its "preferred width" considering the image having a width auto and this will make the width of fixed element equal to the initial width of the image. Later we resolve the percentage width of the image based on the one of the fixed element. In other words, its own width! that's why width:100% will keep the initial image width
Add some border and use a different percentage to better understand:
div {
border:1px solid;
}
<div style="position:fixed;">
<img
style="width:80%"
src="https://via.placeholder.com/150x100.png"
/>
</div>
<div style="position:fixed;top:150px;">
<img
style="width:80%"
src="https://via.placeholder.com/150x100.png"
/>
</div>
In the above, the image will take 80% of its own width because the width of its containing block is equal to the initial width of that same image.
Now let's move to the other example where you have an image inside an absolute element inside a fixed one.
div {
border:1px solid;
}
<div style="position:fixed">
<div style="position:absolute">
<img
style="width:100%"
src="https://via.placeholder.com/150x300.png"
/>
</div>
</div>
The difference here is that "available width" of the shrink-to-fit algorithm. I know this one is a bit tricky but since our absolute is inside a fixed element (which also follow the same shrink-to-fit behavior) the "available width" will be equal to 0.
In this case, the absolute element will end having a width equal to 0 and width:100% of the image applied to 0 will also give you 0.
If your slowly increase the width of the fixed element you will increase the "available width". See the below animation to understand:
div {
border:1px solid;
}
.move {
animation:m 2s linear infinite alternate;
}
#keyframes m {
0% {width:0%}
100% {width:100%}
}
<div style="position:fixed" class="move">
<div style="position:absolute">
<img
style="width:100%"
src="https://via.placeholder.com/150x300.png"
/>
</div>
</div>
In the above I am increasing the "available width" making the absolute element growing until it reach the "preferred width".
Remember our equation:
min(max(preferred minimum width, available width), preferred width).
We have min() that's why the width of the absolute is limited to the "preferred width" and we just saw how that width was calculated and it's the initial width of the image.
The width of elements with position: absolute are automatically set to zero. You just need to add a width to the position: absolute div:
<div style="position:absolute; width: 500px;">
<img style="width:100%" src="https://via.placeholder.com/150x300.png" />
</div>
I want to make an image fit a div whilst maintaining its aspect ratio. I have seen other posts where it is mentioned to use max-width:100%;.
when the image is smaller than the div, it works fine, the image is kept to a size within the div. But when the image is larger, it simply gets out of the div.
<img src="testimg.jpg" style="max-width:100%;max-height:100%;"/>
But when i use this code:
<img src="testimg.jpg" width=540px/>
The large image is resized to fit the div but does not maintain its aspect ratio.
Can any one advise on the above issue please?
This should mantain the aspect ratio:
<img src="testimg.jpg" style="max-width:100%; max-height:auto;"/>
I do not recomend using inline CSS, instead separate it:
CSS:
img{
max-width:100%;
max-height:auto;
}
HTML:
<img src="testimg.jpg" />
For the second part of your code, the width attribute represents the exact width of your image, not the maximum width. And in HTML5, the value must in pixels but without px suffix:
<img src="testimg.jpg" width="540" />
Again this is not a good practice, always use CSS to manipulate the HTML elements.
max-width:100% works only if the img tag has not width and height attributes, because they prevail on max-width. So please try to remove the width="540"
Please try the following CSS
div{ovwerflow:none;}
img{width:100%; max-height
I have a div with height:auto;
I do see that it will resize based on some elements. It does resize with just plain text for instance.
However, if i set a child div with specified size, the parent height:auto; div will not resize to fit around that child div.
So i was wandering if maybe changing the Display type would help? (no luck so far though).
Thanks
EDIT:
There are no floats inside the parent div, if not absolute elements are considered float?
The parent div is position:relative;
and the child div is absolute.
When i tried to use overflow:auto; on the parent div, scroll bars appeared on the parent div instead if making it bigger when needed.
Thanks for the replies!
<div style="height: auto; position:relative">
<div style="height: 50px; position:absolute;">ALOHA</div>
</div>
It sounds like your child DIV or content is floated. On its own, height: auto; will not scale around this as it doesn't recognise floats as a part of the regular document order.
Your best solution is probably to use overflow: auto; on your parent DIV.
Alternatively, if floats are responsible, your parent DIV will also wrap around floated content if you apply a float to the parent itself. This may not be ideal, though, because this will affect its placement - so overflow: auto; is most likely better.
If you can provide any examples of your code, I'm sure someone can give you a more specific example.
If you mean something like
<div style="height: auto">
<div style="height: 50px">ALOHA</div>
</div>
It will fix the parent.
Div doesn't fill parent div, but if you'll change your structure like thi:
<div style="height: auto">
foo bar foo bar<div style="height: 200px">heya</div>
<div class="clear" style="clear: both"></div>
</DIV>
height:auto will works.
edited ;)
Struggling with the dreaded centring of different sized images in a DIV.
Got a solution from StackOverflow ( How to vertically align an image inside div ), using a <SPAN> as a dummy element (with vertical-align: middle) and it works well except for the images which are bigger than the DIV and these are correctly resized, but shown below the DIV.
If I remove the <SPAN>, then the centring works in the horizontal, but not in the vertical.
If there is a simple change, I can make as I like the simplicity of the solution.
The tests are at
http://mclportal.net/ModalTests.html
This will work for you:
<div id="divModal" style="display:table">
<div id="divImage" style="display:table-cell; vertical-align:middle">
<img id="img" src=".........">
</div>
</div>
You should put max width and max heights on your images. Then just use relative positioning of the images inside a div with a relative position. for instance...
<div style="height: 300px; width: 300px; position: relative; text-align: center;>
<img src="#" style="max-width: 200px; max-height: 200px; position: relative; top: 50px; />
</div>
Using an approach like this all images will be vertically aligned with each other and centered within their div container. Plus having max height and width set will allow the image to keep its aspect ratio.
#mcl not sure if you've managed to resolve your problem yet.
If not checkout out my blog post centering large images in smaller containers their is also a codepen demo on there.
I had the same issue and managed to get it working without any need of javascript or inline styles.
Hope it helps
I've used the line-height property in the parent and the vertical-align in the child:
<div style="height:500px; line-height:500px">
<img src="someimage.jpg" style="vertical-align:middle" />
</div>
It Works inside the body tag but when I try to put that content inside a colorbox the image aligns to the top, Is there some restriction of this rule inside absolute positioned elements, floated elements or something???
If anyone knows a better way to center an image vertically (not with top:50%) I'd appreciate it
Thanks
You can use display: table-cell but you will have to put another div wrapping the image at this way:
<div style="display: table-row; height: 500px;">
<div style="display: table-cell; vertical-align: middle;">
<img src="someimage.jpg"/>
</div>
</div>
After comparing every single style (computed and not) I deleted de colobox css but it didn't solve the problem so I think it should be something related whith the HTML. At the end I changed the DOCTYPE from transitional to RDFa and it worked!!