Keep div height while the image is loading - css

I have a square image within .img-container. Sometimes it takes a few seconds for an image to load and the .img-container collapses and only takes the full height when the image loads. However, I would like it to keep the full height (as if the image is there) while the image is loading.
I would've easily done this by setting a min-height on img-container class, however it's a fluid grid and the image is responsive (notice bootstrap's img-responsive helper class) which makes it hard to set the min-height to an appropriate value for different screen sizes (although achievable with media queries as a last resort).
Solving this by putting a placeholding image sounds like an overkill (especially performance wise on mobile). Also, not sure what would load first then, the placeholder image or the actual image.
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="card">
<span class="img-container thumbnail clearfix">
<img alt class="pull-left img-responsive" src="http://...">
</span>
<div class="caption">
<a href="http://.." class="card-title lead">
Some text
</a>
</div>
</div>
</div>

EDIT DUE TO COMMENT
If you do not specify a source at all (not even a dummy, temporary one), the browser will not even try to "guess" the image's height, and so it collapses. If you know the ratio of the image (it's obviously 1:1 in case of a square picture), you can use the following trick to preoccupy the space, and scale the image along with the div.
Set the following CSS:
.test-div-inner {
padding-bottom:100%;
background:#EEE;
height:0;
position:relative;
}
.test-image {
width:100%;
height:100%;
display:block;
position:absolute;
}
Then you can use the following HTML:
<div class="test-div-inner">
<img class="test-image" src="http://goo.gl/lO9SUU">
</div>
Here is the working example: http://jsfiddle.net/pQ5zh/3/
Note that the fiddle contains another div element, this is only required if you would like to give it all a padding or border, since the padding-bottom calculates the padding in pixels based on the width of the div INCLUDING THOSE PARAMETERS, which is NOT the effect we want to achieve (the image would be a little taller than it should be).
For non-square images:
If you would like to change the ratio of the picture, just change the padding-bottom of the container div accordingly. For example, if you would like to place an image with a ratio of 2:1, change the padding to 50%. To keep it short: the ratio of the container div's width and padding should always be equal to the ratio of the image's width and height.
There is an easy way to do exactly this, but it only works for square images.
Specify the width of the image (using CSS) to be 100%. This way the browser will automatically assume that the image height is the same as it's width, and preoccupy the place.
http://jsfiddle.net/pQ5zh/2/
.test-image {
width:100%;
}
Note: There is a way to achieve this for non-square images too, but that is a bit more complicated.
EDIT: See above.

Ok, assuming all images are square, we can do it. Add an extra div around your image like this:
<div class="img-container">
<div class="image-wrap">IMAGE HERE</div>
</div>
Then we want CSS along the lines of
.img-container {
position:relative;
background: #ccc;
width:200px; /* Remove this width */
color:#000;
}
.img-container:before{
content: "";
display: block;
padding-top: 100%;
}
.image-wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
See this in action:
http://jsfiddle.net/jamesking/LNvmY/
You'll want to remove the width set in .img-container

Related

HTML/CSS how can I keep right hand div responsive while specifying width

I have a webpage with a left and float right div, which is supposed to be responsive. I want the righthand div to slide under the left hand div if the screen is narrow. I have that sort of working, but a problem remains.
Both divs have images inside them, and the images seem to be causing the div width to increase, which in turn puts everything in the wrong place. But if I specify any kind of width at all (width in %, width in px, max-width, etc) on the right hand div, it won't slide under when the screen narrows.
Here is how it looks now:
and here is how it looks sliding under:
What you can see for both divs is that the width far exceed the size of the images, and that is a problem in the right hand image. (The small black and green boxes in the right hand div are outlines of the <a tags.)
The code:
<!---white body --->
<div style = "width:75%; margin:auto;background-color:white; border:2px solid black">
<div class="container">
<div class="one">
<a href = 'ind-pg1.cfm' >
<img src = "ind-leopard-happy.jpeg" alt = "eznplogo"
style = "width:50%; height:auto "></a>
</div>
<div class="two">
<div style = 'width:50%; float:right'>
<a href = 'dashboard.cfm' style = 'border:2px solid black; '>
<img src = 'ind-pict-login.png' style = "width:30% "></a>
<a href = 'ind-purchase.cfm' style = 'border:2px solid green'>
<img src = 'ind-pict-signup.png'style = "width:30%"></a>
</div>
</div>
</div><!---container--->
</div><!---white body --->
The css:
.container {
overflow:hidden;
height: 500px;
}
.one {
position: relative;
float:left;
background-color: lightblue;
width:40%;
}
.two {
background-color: yellow;
float:right;
}
First, I don't understand why the divs are wider than the images; and why they don't get narrower when I narrow the image. If there is some way to make the right hand div narrower without setting a width for it, I'd like to be able to do that. EDIT: IT TURNS OUT THE WIDTH OF THE DIV IS DETERMINED BY THE ORIGINAL SIZE OF THE IMAGE. BY SCALING DOWN THE IMAGE I WAS ABLE TO CONTROL THE WIDTH OF THE DIV.
However, I also don't understand why setting a width on the right hand div is causing it to stop sliding under.
If anyone can explain either thing to me that would be very helpful. Can anyone suggest the way to do this so that it works without excessively wide divs?

How can I make my background colour for section 1/2 fill full screen?

How can I make my background colour for section 1/2 fill full screen?
http://codepen.io/ldocherty1/pen/KWGWxz
<div id="sections">
<div class="section one">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
</div>
You want to use the VH length unit in CSS, this stand for Viewport Height and there is also its counterpart vw which stands for Viewport Width.
A quick example with these would be:
CSS:
div {
display:block;
height: 50vh;
background-color:#c00;
}
HTML:
<div>
This div will take up 50% height of the viewport that contains it</div>
Without seeing your CSS code in the question I can't give you an absolute answer but you will learn more by playing with your code yourself, with this knowledge. To make a <div> half the screen height simply set: div { height: 50vh; }.
(you may have to set things like min-height as well and/or take into account other more-complex CSS flow things depending on your exact DOM structure)

How to resize the width of div left to another which has float:left;?

I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!

Scaling an image sprite, using percentage: Possible?

I just received help in another question I recently asked here in regards to sprites, but now that I have them working properly, I have run into another problem: How can I scale the image displayed?
My current code is as follows:
<div class="index1"></div>
And CSS:
img.index1 {
margin:auto;
width:258px;
height:300px;
background:url("../Images/index.png") 0px 0px;
}
This is the basic code that works as is, to display the appropriate image from the sprite at an absolute dimension of 258*300 pixels. Problem is, I also want to set the width to be 40%. Here is what I tried:
.index1 {
margin:auto;
width:40%;
max-width:258px;
height:300px;
background:url("../Images/index.png") 0px 0px;
}
If I were to use normal images (ie, not sprites), I'd simply set the width to 40%, and the image scales nicely to the containing div. This would be in a ratio, so the height decreases as well, without any distortion or image cutoff. Using the CSS above, the image is unscaled, and because the width is lowered, the sides are cut off.
The aim here is to have the width adjust accordingly, to different browser widths, and simply put, I want to replicate the image behaviour exactly the same way as it would be with a simple image with a percentage width set on it. I have thus far failed at it. And no, I cannot work around the scaling issue.
EDIT: I should also mention that adjusting the browser width merely adjusts how much of the image is cut off.
Solution:
First off, this only works if you have multiple images of the same size (perhaps of the same ratio, but I haven't tested). So I'll try and explain the solution as best I can, with the help of a hypothetical example:
Firstly, you need a placeholder image. This image MUST be the same size, or ratio, as the images you will be displaying. Doesn't matter what the image content is, but I went with a transparent image.
Now, let's say you want 5 images in your sprite, and they will be displayed on your homepage. Let's call these images index1.png, index 2.png etc. Here is the HTML to display it:
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite1" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite2" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite3" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite4" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite5" src="Images/index.png" />
</div>
You'll notice that there are two images inside a div. I'll get to the significance of the div class name in a moment. The trans class shows the transparent image, and the "sprite sprite5" classes show the actual image. I have two classes assigned for this image, just to keep the number of lines in my CSS to a minimum, and to make global image changes much simpler. You'll also notice that the difference between the contents of the five divs is simply the second class name for the second image changes from sprite1 to 5. I'll also explain this in a moment.
Now for the CSS:
.stretch15 {
width:15%;
max-width:258px;
overflow:hidden;
position:relative;
margin:0px auto;
display:block;
}
.trans {
width:100%;
height:auto;
display:block;
margin:0;
padding:0;
}
.sprite {
position:absolute;
top:0;
max-width:none;
max-height:100%;
display:block;
}
.sprite1 {
left:0;
}
.sprite2 {
left:-100%;
}
.sprite3 {
left:-200%;
}
.sprite4 {
left:-300%;
}
.sprite5 {
left:-400%
}
I used the class name 'stretch15' to show the width of the div. I use multiple div widths, so, I used some arbitrary name 'stretch', and then a number to let me know what the width is. So stretch15 tells me the div will be 15% wide, as seen in the CSS. By changing the width in the CSS for this div, you essentially replicate the function of (which I am aware isn't valid code, but it's the simplest way to show it).
As for sprite1 to 5, they all share the same styles in the sprite class, so all that was left was for me to identify which 'left' position to start displaying an image from. This is why the images have to all be the same size. If you move -100% to the left (or 100% to the right), you should land on the left side of the second image. -200% left gets you to the third image, and so on.
As for the rest of the stuff, I honestly wasn't too sure why they were there, other than the fact they they work. What I did was view the source code over here. Also, it really helps if you have something like Firebug (Firefox extension), where you can disable styles to see how things are affected. It will help you understand a lot.
If you'd want a simple fix without worrying about crossbrowser-issues, I'd suggest to use a normal image.
Next, one could use data URIs or use a combo of zoom for webkit/ie and -moz-transform:scale for Firefox or finally break your head on background-size calculations.
You might also want to read: How can I scale an image in a CSS sprite
Hope this helps!
not too sure if i totally get what you mean .
If you want to strectch(?) image on it's width,
you need to get the ratio of the part of your sprite you want to be seen
http://codepen.io/gcyrillus/pen/fjCdD here 'background-size is 100% 232%.
Resize windows width untill box reaches max-width:40%.
maybe a better exemple keeping ration of the sprite and container :
http://codepen.io/gcyrillus/pen/KuJDl

How to fix an image position relative to another image with different screen sizes

I'm writing a website/iPad app (using PhoneGap), where I have 1024x768 images on a slide show. I'd like to position another image, e.g. the home icon, on top of the 1024x768 images, at exactly the same position, no matter the screen size (e.g. high/low resolution PC screen, or 1024x768 tablet display). I tried absolute, but the position changes in different displays, and it's not the same position as I originally set up in CS 5.
Similar to the other answers, but if you prefer not to define the width and height, you can use float:
http://jsfiddle.net/RprTY/
<div>
<img src="http://placekitten.com/300/300">
<img src="http://placekitten.com/30/30" id="smallone">
</div>
CSS:
div{
float: left;
position: relative;
}
img{
vertical-align: bottom;
}
#smallone{
top: 0;
left:0;
position:absolute;
}
As long as the parent container is set to either position: relative or position: absolute, then the absolutely positioned image should be positioned relative to the top left corner of the parent. This should be completely independent of screen resolution.
Put your 1024x768 image in a div of the same size. Include your home icon in that div as well. Give the div position relative, and the home icon position absolute and it will be absolutely positioned inside it's parent div.
I tried the solution proposed here but it didn't work. I have basically the same problem: two images inside a slider, one of them is absolute positioned with percentage values (so when I change the width of the viewport it scrolls sideways). The other image should move along with the first one statically positioned in relation to the latter.
The thing is in my case the images are not children of the same parent div. I have set up a Fiddle example of the code I am currently working with.
http://jsfiddle.net/36QPG/1/
<div class="image">
<img id="back" src="http://placekitten.com/300/300" />
</div>
<div class="slide">
<div class="image">
<img id="front" src="http://www.lionsclublagardiecastelnau.com/data/images/images-sites/images/icone-android.png"></img>
</div>
</div>
It's worth mentioning that I can't change the HTML code set up.
I've been struggling with this problem for a while now, but I haven't been able to figure it out. I hope I've made myself clear enough.
Thank you in advance.
html:
<div id="bottom">
<div id="top"></div>
</div>
css:
#bottom{
background: url(*bottom-image-url*);
position: relative;
width: *??*;
height: *??*;}
#top{
background: url(*top-image-url*);
position: absolute;
width: *??*;
height: *??*;
left: *??*;
right: *??*;}

Resources