I have an img element with style='width:40%;height:40%;'. I would like to add a div that automatically wraps it. However when I insert the div instead of wrapping the img it just expands to the div inside.
How can I force this div to wrap img so it can be used as a frame. The reason why I do not preset the div's height and width is because img's percentages will be given dynamically, so div should wrap the img according to img's sizes.
If you do it like this
<div id="wrapper">
<img src="...">
</div>
you could add the display: inline-block; attribute to the wrapper. That did it for me. Yet still, your style='width:40%;height:40%;' will make its height being adjusted by its parent as #jesse-van-assen already mentioned.
The problem with a width and height of 40% with an image tag, is that the image isn't downscaled to 40% of it's original size, but takes up 40% of it's parent, as you can see here.
In your case, you want to wrap the image in a div, but still want to size it to 40% of it's parent. In this case, the parent IS the wrapping div. You see the problem.
If you just want to use the div as a frame, you can use css to style the image to gain a similar effect, like this:
<img src="..." style="border: 1px solid #000000; padding:10px;"/>
Example of this principle here.
make all your images float to left.
img
{
float:left;
}
and clear each div with
<div style="clear:both"></div>
as the very last element in the wrap div before it closes.
hope it helps.
Related
OK so today my brain is broken I can't figure this basic problem out. I want to have a LINK that goes underneath an image. The images may have different widths, let's say some are 100px wide and some are 200px wide:
<div>
<img src="image.jpg" style="auto;text-align:center;display:block;padding:1em;border: 5px solid #EFEFEF;">
WORDS
</div>
If I set the link's display to inline-block, it only takes up the space it needs to say "words". If I set it to block, the div stretched to accomodate it and it takes up 100% of the available space and is 5x too wide, much wider than the image.
I want the link to take up the whole width of the div, and I want the div to be as wide as the image (plus padding).
If I set the div's width in pixels, it doesn't look right if the image is a different width. What am I missing here?
Set the link style display:block; and maybe give your image a width="100%"
The parent div will automatically be set to display: block which will span the entire length of the page. If you set the parent div to display: inline-block the div will only be as wide as the image. Then you set the link with a width: 100% and this should give you the results you are looking for.
here is a Fiddle for you to see what i mean.
I have updated the fiddle to include 2 different size images. the key is you have to wrap each image and link in a new parent div.
Hope this helps!
*EDIT: If you would like to add a space between the image and the link with padding only give your image the top/bottom padding like so padding: 1em 0; and then add the side padding to the parent div like so padding: 0 1em.
Here is another Fiddle with that implimented.
Is this what you want? Let me know if I can improve this answer :)
<div>
<img src="image.jpg" style="auto;text-align:center;display:block;padding:1em;border: 5px solid #EFEFEF;">
WORDS
</div>
I suppose u ask something like this...
<div style="width:100%; max-width:400px;">
<img src="http://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png" style="auto;text-align:center;display:block; max-width:400px; width:100%; padding:1em;border: 5px solid #EFEFEF;">
WORDS
</div>
well as u see i've played with the width in all the elements to achieve it, and cheated on the "a" tags' border-padding.
without setting a width on your image and your main div, you cant achieve what u asked unless u use javascript...
Here is the prototype I am trying to implement
Here is what I have right now.
I learned from my previous question Side to Side How to align the column of options with the picture - using display inline block attribute- Display.
Now I am trying to align the picture so the picture doesn't stretch past the entertainment option like in the prototype. Here is JSFiddle
Seeing that a block element like div "occupies the entire space of its parent element" - Block Element, the Css Height attribute made the most sense to me to use here.
Here is my code for setting height in both the image and the div containing the image
The div
.sidebar {
display:inline-block;
vertical-align:top;
width:70%;
height:3%;
}
The image
#laptop {
width:100%;
height:3%;
vertical-align: bottom;
}
The 3% was just a hardcoded test value but in both instances, the height of the image didn't change. I saw another thread on this - Height Thread but that one said to adjust height as well.
Does anyone know to scale the height of the image in this situation?
How I solved this issue was I realized that by definition, a div is a block element that "will expand naturally to fit its child elements".
So going off that, I played around with the css width and height attributes and found a height that would cause the image to line up with the entertainment component.
If anyones curious, here is my final img html tag code(height of 240 pixels)
<img id="picture" align="middle" src="zoom-39988392-3.JPG" height = "240" width ="90" />
Taking a shot in the dark without looking at all the code. How are you creating your image, in an <img src=""/> tag or as the background of a div via the css attribute background:url("image.png");? The height and width percentages reference the dimensions of that elements parent element. I'm going to assume that your image has no parent element/container, or that the parent/element container is not set to specified height. Therefore your element is referencing the Viewport who's height attribute is automatically set to auto. Set your HTML and Body elements height attribute to 100%.
html,body{
height:100%;
}
I have a simple DIV with a fixed height like and several images with individual heights inside (their height is equal or less the height of the outer DIV):
<div>
<img src="..">
<img src="..">
...
</div>
This markup is as-is and can not be changed. I need to display all images side by side and all images should be vertically aligned with the middle of the DIV (so the padding top and bottom is identical per-image).
How to do that without changing the markup? Various answers deal with a markup where the image is placed itself inside a DIV which is not the case here.
After re-reading your question, that the <div> is at least as high as the highest image, simply do this:
CSS
img {
vertical-align: middle;
}
Try it here: http://jsfiddle.net/AsD9q/
You can also prevent the div from breaking (when the viewport is to small) by setting an explicit width or using white-space: nowrap; on the container: http://jsfiddle.net/MvDZJ/ (using width) or http://jsfiddle.net/xMtBp/ (using white-space)
That's the outcome:
First answer, which works with every height of the div:
As you said nothing about container itself, I assume, that it's not wider than the viewport. Than you could simply do something like this:
HTML
<div>
<img src="http://lorempixel.com/200/100/">
<img src="http://lorempixel.com/200/80/">
<img src="http://lorempixel.com/200/120/">
<img src="http://lorempixel.com/200/60/">
</div>
CSS
div {
display: table-cell;
vertical-align: middle;
/* only added for demonstration */
height: 200px;
border: 1px solid red;
}
img {
vertical-align: middle;
}
This won't work in IE7 though, as it can't handle display: table-cell. You can try it here: http://jsfiddle.net/3vXXy/.
This can be done with jQuery, the problem is you have no explicit selectors to work with so it would affect every image in every div on the page.
First you need to set the images to the top of the div like this in the CSS:
div img{vertical-align:top;}
Then take each image in succession, get it's height and set it's top padding to half the difference between the height of the div and the height of the image.
$(document).ready(function(){
$("img").each(function(){
var margin= ($(this).parent().height() - $(this).height())/2;
$(this).css('margin-top',margin);
});
});
Again, not an ideal solution without good solid selectors, but it does work. http://jsfiddle.net/calder12/H4Wkw/
I have a container div that has the height of my body which is 100%
#pageContainer{
width:800px;
margin:auto;
height:inherit;
}
inside it i have second div positioned absolutely
<div style="position:absolute;opacity:.05;background-color:white;width:inherit;height:100%;"></div>
So my page looks like this:
<body>
<div id="pageContainer">
<div style="position:absolute;opacity:.05;background-color:white;width:inherit;height:100%;"></div>
<div>some content here</div>
</div>
</body>
So the problem is the absolutely positioned div has height equal to the screen size, not the page, another words when page is heigher than the visible screen, when I scroll down the div is not expanding to the full height of the parent div (pageContainer). I have tried the top:0px;bottom:0px; as well and it doesn't work. Any one knows what's the trick here?
Javascript: You'd either use jQuery via .height() or EqualHeight,
or
CSS: you'd do something like this: CSS equal columns
You have to set the height of each element in the hierarchy to make it expand like this.
Try something like:
html, body {
height: 100%;
}
Setting the height of the html element is the one that I generally forget to do. It is usually also be necessary to set the #pageContainer height to 100%, although you have it inheriting from the body, so in this case you're okay.
Try adding position:relative; to your #pageContainer. Currently, the absolutely positioned div is taking it's position from the window and not the container div.
Sorry to ask a really obvious question I'm sure it has a really simple answer, I just can't figure it out.
Very simply I want to place images inside of divs, where the images fill 100% of the height of the div.
CSS
.container{
height:100%;
float:left;}
img {
height:100%;}
HTML
<div class="container">
<img src="xyz.jpg" />
</div>
The result is as expected but with a large amount of whitespace to the right of the image (within the div) when viewed in any non-webkit browser.
In my layout I want to have many of these divs lined up (by float) in a row so its essential that the div's width shrinks to that of the image.
http://jsfiddle.net/osnoz/VzrnT/
By default, a div without specified height dimensions only expands enough to encompass its contents. Without a specified width, the div will expand to the width of its parent. So until you specify the width, the div's width will not shrink down to the image.
Your div is set to 100% height, which is in relation to its container height, not its contents.
You also do not need to specify 100% on the image itself. This will only make the image stretch to 100% of its container's height. Unless, you specify a container height, this is pointless.
I don't know if I understood the question right, but here it goes:
.container { display: inline-block; height: 100%; }
.container img { height: 100%; }
See the example at jsfiddle.net/erxLv/2