how to force an image background to fit smaller div center - javascript

<div id="img-frame">
<img src="mypathimg.png"/>
</div>
use img 100% will work but it unlike Facebook, it shrink but show the centre of the image.

Since none of the other answers are complete, change the markup to:
<div id="img-frame">
<div style="background-image:url(yoururl.png)" class="img"></div>
</div>
Now add CSS:
.img-frame > .img {
background-size:cover; /* Scale to fit optimistically */
background-position:center; /* Scale from center */
width:100%; /* Same width as parent */
height:100%; /* Same height as parent */
}

Have you tried:
<div id="img-frame">
<div style="background:url(mypathimg.png) 100% 100%;" />
</div>

You could also set the width and height of the image to 100% if you don't want it as a background image. You might need to provide an example of what you have so far and be more specific though.
#img-frame{
width:100px;
height:100px;
}
#img-frame img{
width:100%;
height:100%;
}

You could try:
<div id="img-frame">
<div style="background-size: cover;" />
</div>

you could use css3 rule: background-size as
<div id="img-frame">
<div style='background:url(mypathimg.png) ;background-size:contain;' ></div>

Related

Nothing appears when placing a background image in a <div> element

Using bootstrap, I'm trying to set a background-image for the first row of an html page. The .background CSS class, contains info on setting up the background image. When I make it a class of <body>, it works fine and fills the whole page with a background image. When I try to put it in the first <div>, though, The image is not displayed at all.
From what I understand, you can set a background image for a <div>. What am I doing incorrectly that is making this not work?
CSS:
.background
{
background-image : url("image.jpg");
background-repeat : no-repeat;
background-size : cover;
}
HTML:
<body>
<div class ="row background">
<div class="col-xs-12">
<h1 class="titletext text-center" id="text" style="color : #000070; margin-top : 250px; display : none" ><b>Harness the power of the web</b></h1>
<input class="center-block" type="image" id="down" src="down-arrow.png" style="margin-top : 350px; display : none" ></input>
</div>
</div>
<!-- start new row -->
<div class="row">
<div class="col-xs-3">
<!-- img> /img -->
</div>
<div class="col-xs-9">
<p>
Blob
</p>
</div>
<script>
$("#text").fadeIn(6000);
window.setTimeout(function ()
{
$("#down").fadeIn(6000);
}, 6000);
</script>
</body>
Also, here is an attempt at putting it in JSFiddle: https://jsfiddle.net/yc1jnp6o/2/. For some reason Neither the image (which I changed for the fiddle) or the headline will display in the fiddle. This isn't the case on the apache server I have set up.
Don't use width, because he has used col-xs-12 in row , that means he want to 100% width
.background {
background-image : url("http://www.w3schools.com/css/img_fjords.jpg");
background-repeat : no-repeat;
background-size : cover;
min-height:200px;
}
You need to declare width and height when using background:
.background {
background-image: url("http://www.w3schools.com/css/img_fjords.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 200px;
height: 200px;
}
May be you can make use of pseudo code
.row.background:before{
display:block;
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image : url("http://www.w3schools.com/css/img_fjords.jpg");
background-repeat : no-repeat;
background-size : cover;
z-index:-1;
}
it covers whole row class
Check the fiddle

Scale an image instead of wrapping text around it when the browser window is resized

I have an image positioned next to a div with some text by using display: inline on the div.
When the browser window is resized to be more narrow, I would like the image to scale down instead of having the text wrap around it first.
Currently, the text will wrap under the image when the window is resized, and only then will the image scale thanks to its max-width.
The end goal is to have a horizontal logo next to a horizontal menu, and have the logo scale on window resize while the menu stays in place.
Would be great if this could be done with just CSS, but I'll take Javascript if that's not possible.
<style>
img { max-width: 100%; }
#textblock { display: inline}
</style>
<div id="container">
<img src="https://www.google.com/images/srpr/logo11w.png">
<div id="textblock">Some Random Text</div>
</div>
Fiddle: http://jsfiddle.net/uLc8dcsh/1/
try this :
<div id="container">
<div class="div1"> img tag should be here </div>
<div id="textblock"> </div>
</div>
and css
img {
max-width: 100%;
float:left;
}
.div1{width:80%; float:left;}
#textblock {
display: inline;
float:right;
width:20%;
}
#container{width:100%; float:left; }
Do you mean something like this http://jsfiddle.net/uLc8dcsh/3/ ?
Here the logo will grow max to width of 300px when you maximize the window.
The minimum width of the container is set to 300px so the word will not wrap
the logo's width is 50%, means 50% of the #container width
img {
width:50%;
max-width: 300px;
}
#textblock {
display: inline
}
#container {
min-width: 300px
}
This answer is probably overkill:
What is this:
1. Float image, overflow hidden
This if so the text does not overflow under the image
2. added clear-fix to containing div
This is so the image does not destroy the outside element (article)
Html
<article class="clearfix">
<img src="some image"></img>
<p>Some random text</p>
</article>
css
article p {
overflow:hidden;
}
article img {
float:left;
max-width:80%;
}
article {
border:1px solid;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
And here is the Fiddle

Getting width of a child div with width 100% gives windows width

HTML:
<div id="parent">
<div id="child">
<div id="child1"></div> <!-- UPDATE -->
</div>
</div>
CSS:
#parent{
float:left;
width:90%;
}
/* UPDATE*/ #parent #child{
float:left;
width:100%;
}
/* UPDATE*/
/* In a different file*/
#child1{
float:left;
width:100%;
}
jQuery:
Say the width of the window is 1000px. So the width of #parent should be 900px. If I try to get the width of the #child1 it should also be 900px. But the below jQuery code returns 1000px.
jQuery("#child").width(); //UPDATE: returns 900px as width
jQuery("#child1").width(); //UPDATE: returns 1000px as width
I need 900px as result of the above statement.

Center div inside 100% width container with dynamic width left and right floats

I want to have 3 divs aligned inside a container div, like this:
[[LEFT] [CENTER] [RIGHT]]
Container div is 100% wide (no fixed width), and center div should remain in center after resizing the container.
Left and Right DIV have no fixed width and need to expand/contract with the container. Center DIV does have a fixed width.
I have this:
<div style="width: 100%">
<div style="float: left; height: 50px;"></div>
<div style="float: right; height: 50px;"></div>
<div style="margin: 0 auto; height: 50px; width: 500px;"></div>
</div>
Problem is, the left and right do not show because there is no set width
Any suggestions?
You can't do that with pure CSS. You need to use JavaScript. In the example below Middle div is fixed at 400px while remaining space is be split between left and right divs. With jQuery you can do
function calc() {
var ww = $(window).width();
var rem = ww - $('.div2').width();
$('.div1, .div3').css('width', rem / 2);
}
calc();
$(window).resize(calc);
Check working example at http://jsfiddle.net/M5Ghx/3/
Another option, if you wanted to avoid using javascript, would be to give the center div an absolute position and create two divs to use as buffers within the left and right divs:
<div style="width: 100%; text-align:center">
<div style="width:50%; height: 50px; float:left">
<div style="width:250px; height: 50px; float:right"></div>
</div>
<div style="margin-right:auto; margin-left:auto; position:absolute; left:0; right:0; width: 500px;height:50px;"></div>
<div style="width:50%; height: 50px; float:right">
<div style="width:250px; height: 50px; float:left"></div>
</div>
</div>
If you only care about Mozilla and WebKit, then you should look in to using the Flexible Box Model:
http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
That will solve all your centering issues in pure CSS. Just be sure to read the docs and play around with the different options so that you understand how it works.

How to resize a container div to the total height of its children?

I have a container element which I need to resize as its contents change. It contains 2 absolutely positioned divs which can both change height. If I don't specify the height of the container then anything after the container disappears under the contents.
At the moment I am doing the following but I'd be pleased to find a less laborious alternative:
(container has position:relative, #main and #sidebar are position:absolute, the contents of #sidebar have no positioning specified)
css:
div#mapcontainer { position:relative; width:100%; height: 600px; }
div#main { position:absolute; top: 0; left: 10px; width: 500px; height: 400px; }
div#sidebar { position:absolute; top:10px; right:10px; width: 155px; height: 405px;}
html:
<div id="container">
<div id="main">variable height content here</div>
<div id="sidebar">
<div id="foo">...</div>
<div id="bar">....</div>
...
</div>
<div>
js:
fixHeights = function() {
var children_height = 0;
$('#sidebar'). children().each(function(){children_height += $(this).height();});
$('#container').height(Math.max(children_height, $('#main').height()));
};
This is a very odd question, as div's height is always the height of its children.
Are you floating content in your container div? When you float child content the containing div doesn't act the same anymore.
If you're floating content that extends past the bottom of the container div, add the following div to the very bottom of the children of the container div:
<div style="clear:both;"></div>
That will not allow children to float over it, thus forcing the containing div to be the height of its tallest child...
<div id="container">
<div id="dynamic" style="float:left;width:100px;">dynamic content goes here</div>
<div id="static" style="margin-left:104px;">Lots of static stuff here</div>
<div style="clear:both;"></div>
</div>
Okay, I'm not sure why you're doing the positioning the way you are, but I've done something similar for a website that had to look like a desktop application. I don't believe there is any way to do this other than with javascript. Html documents are designed to flow, not be rigid. If you want to bail on the javascript, you'll have to let go of the positioning styles and use your floating and clearing divs. Its not that horrible...
if you're floating the container div "overflow: auto" can also work magically, esp with regard to the whole IE hasLayout debacle
You didn't specify but I think you are having a problem with floating elements and you want the container they are in to be at least the size of the biggest floating element. You should try the following CSS hack that forces the browser to rerender the size of the container element to the size of the floating elements:
#wrapper:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
Let me know what you come up with and if this works. There are many other hacks to try, depending on your browser.
I would try changing the css not to use absolute positioning. In Firefox you would need to use the wrapper trick mention in the comments to get the mapcontainer the right height.
div#mapcontainer { clear:both; width:100%; min-height: 600px; }
div#main { float:left; margin-left: 10px; width: 500px; height: 400px; }
div#sidebar { float:left; margin-top:10px; margin-right:10px; width: 155px; height: 405px;}
Overflow:visible; That's the ticket. overflow:auto will create a scroll bar, if needed.

Categories

Resources