If I have a code like this:
<div id='container'>
...some stuff....
<div id='img_box'>
<img src=''>
</div>
</div>
in which "CONTAINER" has a fixed width (i.e. 1200px), if I set IMG width to 100%, she span only for 1200px, so costrained in its container.
I would like that image could span across the entire width of browser window (minus some lateral margins), horizonally centered.... so that IMG oveflow its container in fluid way while enlarging window.
Is it possible in such way?
You could use the new css viewport units for this
FIDDLE
img
{
display:inline-block;
width: 100vw; /* 100% of viewport width */
position: absolute;
left:0;
}
No. The only way that might be possible is to position the img tag or #img_box absolutely, and make sure that no parent containers are position:relative.
The img will always be the width of a parent container if it has an explicit width and your image is set to 100% width.
Related
I was reading a bootstrap css file in which col-md-6 was assigned as
max-width:50%;
After doing it as width instead of max-width the result was same as before so, why do we need to use max-width.
Well, it means that the element won't ever become wider than 50% of its parent element.
So especially in responsive web design, if you define an elements width as width: 300pxand max-width: 50%, it will be 300px on wider screens where the (reponsive) parent can be wider than 600px, and if a smaller screen forces the parent element to become narrower, the child will always remain at 50% of the parent's width, which will then be less than 300px.
.parent {
width: 80%;
background: yellow;
}
.child {
width: 300px;
max-width: 50%;
background: green;
}
<div class="parent">
<div class="child">
content
</div>
</div>
This is how max-width works.
If the content is larger than the maximum width, it will automatically change the width of the element.
If the content is smaller than the maximum width, the max-width property has no effect.
Note: This prevents the value of the width property from becoming larger than max-width. The value of the max-width property overrides the width property.
Source:
https://www.w3schools.com/cssref/pr_dim_max-width.asp
if we set a div to max-with of 50%, then it will limit the content to 50% of the container.
But if we the content is lesser then 50% of the container, then the width of the div will be actual content width.
By the way, max-width is supported by all major browsers including IE7+ so you shouldn't be afraid of using it.
Please go through the below link for details and examples.
https://www.w3schools.com/cssref/pr_dim_max-width.asp
I'm using bootstrap and the img-responsive class. I'm trying to place an image in the middle of a div and it works perfectly. However, for some screen sizes, I'd like the div/image to be a certain minimum height. However, when I set min-height the image stretches vertically to meet this height, but the width does not, so the image is distorted.
CSS
img#main-im14 {
min-height: 500px;
width: 100%;
}
HTML:
<div class="header-content-inner">
<img id="main-im14" src="img/image.png" class="img-responsive">
</div>
How can I fix this?
use width: auto; instead. Your current css is telling the browser to size the image to 100% of its container width AND stretch it to 500px tall as well, hence the distortion.
If I have an image on a page with width set to 100% in css it is as wide as the browser. Fine. However, if I make a containing div have display:inline-block, then the image is no longer set to have a width:100%. Instead, it just shows as the actual width of the image:
img {width:100%;}
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
<div style="display:inline-block;">
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
</div>
So, basically, the inline-block containing div wants to be as wide as its contents, and the width:100% on the image wants to be as wide as the containing element, so it seems they are both confused and just defaulting to the width of the image. I know I can set the width of the containing div to be 100% and have the desired outcome, but for what I am actually doing, that is not an option. Is there any way to force the img to be 100% width with only css on the image itself? I guess I am basically trying to set a class on a parent of an element, which I do not think is possible... Ideas?
This is because a percentage value on width is relative to the width of the box's containing block. While a block-level container (<div> element, for instance) takes the entire width of its containing block, an inline-level element doesn't.
Therefore you have to specify the width of the wrapper <div> explicitly. As a thumb rule, when you say 100% you should ask yourself 100% of what?
img { width:100%; }
div { display:inline-block; width: 100%; }
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
<div>
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
</div>
Alternatively, in cases where you want to set the width of elements as the width of the viewport/window, you could use viewport percentage units instead. For instance:
img { width: 100vw; } /* 1vw = 1/100 of the width of the viewport */
Demo:
img { width: 100vw; }
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
<div>
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
</div>
I dont think this will help your problem , but technically you could do it by giving it position:absolute;
img {
width:100%;
}
div img {
position:absolute;
margin:0 auto;
width:100% !important;
}
http://jsfiddle.net/kjf8s3rq/
The problem is that you are trying to use dislay-inline in a way contrary to its intended use. If you want the image to take up the full width of the window, then clearly its container must also take up the full width. Which means you want your div to behave like a block element. So the solution is either to do just that and leave the div as display:block (its default value to start with), or at the very least you must set it's width to width:100%. Afterall, if you want to take up the full width of the screen then you want it to be a block.
Inline-block elements have to have their width set, either by specifying a width in the CSS, or by letting them take up as much width as they need to hold their content. In your case the image has its natural size, and your surrounding inline-block div is therefore taking up just that size and no more.
Setting width:100% on the image doesn't change that; that just tells it to take up the full with of its container, not the whole window. But your containing div is already the natural size of the image.
is anyone know how a background image is being cut off due to smaller size of window. Please have a look to this site. http://nfldata.com. Try to make the window smaller than 900px width. Then scroll to the right side. You will find the background image is not there. But for the footer, it appears. What CSS code that causes this problem?
I think you are looking at the background on the content-wrapper div as shown below. Since the width of that element is set to 100%, and the center-block div has a fixed width of 1000px, if you collapse the window to a width that is less than the 1000px the content wrapper will not display and the background will effectively disappear.
HTML Element...
<div id="content-wrapper">
<div class="center-block">
....
</div>
</div>
Relevant CSS:
#content-wrapper {
margin: 0 auto;
width: 100%;
background-image: url(/images/content-background.png);
background-position: center top;
background-repeat: repeat-y;
}
#content-wrapper .center-block {
width: 1000px;
}
With regards to the header, you will see that it has a declaration of
#header {
width : 100%
...
}
This will set the width of the element to with width of the parent container - in this case it is the active window (in your case is 900px or less). However, since there are other elements on the page which specify a width of 1000px or more, the content inside of those divs appears beyond that.
You could have the page expand by setting the width of body to 1000px (or whatever the maximum width of the page is) in which case, the header would expand to 100% of that size. Or, you could surround the whole content with a relatively positioned , and then the 100% directive would indicate 100% of the width of the surrounding div and not just the window.
So, I have a fully fluid web page.
There is a parent DIV with width:100%, and inside an IMAGE with style:
<div>
<img src="image.png" alt="" />
</div>
<style>
div{ width:100% }
img{
display: block;
margin: auto;
max-width: 100%;
}
</style>
Image is centered in div. I do not know the size of image, but it is always smaller than parent DIV, so there is white space from img borders to div borders. Now, when you resize the browser, the image is not resizing until the parent DIV reaches the borders of the image.
If image would have style width:100%, then it would stretch beyond real size...
I would like this image to scale with div immediately when browser window is resized.
If image canvas would be 100% of parent div, the behaviour would be like I wanted (the image would resize immediately because image would be 100% od div's width). But I can not make images to be like that...
I don't think it's possible with pure CSS, but you can use some jQuery - http://jsfiddle.net/UcV7y/
var ratio = $("img").parent().width() / $("img").width();
$(window).resize(function() {
$("img").width( $("img").parent().width() / ratio + "px" );
});