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.
Related
I have a div that needs to be full screen width inside a parent div that has a limited with. Simplified, it's something like:
HTML:
<div class="container">
<div class="banner">
</div>
</div>
CSS:
.container {
width: 1170px;
margin: auto;
}
.banner {
width: 100vw;
margin-left: calc( 50% - 50vw);
}
which works fine, except for one thing: The scrollbar on the page covers some of the content in the child div, because 100vw appearantly includes the scrollbar width. So is there a way around this so I can set the width to (100vw - scrollbar width), or perhaps a completely different way to achieve what I want to do with pure CSS?
Try to use % where you can. vw is a percent of the viewport width including the scrollbar and % is a percent of the wrapper object, where the body is not rendered inside the scrollbar.
Don't use a fixed width (px) container. It's bad practice and will not render well on mobile screens. See Responsive Web Design for more.
Don't use vw for containers (or banners). It has weird effects on the scrollbar.
Finally, I don't understand why you want something to be at 300vw or 3x the width of the viewport, but sure. If you designed your page right with responsive web design and avoided setting any wrapper's dimensions with px, then it shouldn't be hard to know what that width of the containing div is. For example, if the wrapper (containing div) is at 30% of the viewport and you want your banner to be 300% of the viewport, then you want 1000% for your banner to span the width of three screens.
You could set the scrollbar width and subtract it from the container's width using 'pure CSS'.
You could give width to the scroll bar in webkit-browsers using:
body::-webkit-scrollbar {
width: scrollbarwidthpx;
}
and set the content width as:
width: calc(100vw - scrollbarwidthpx);
You could make use of this article regarding customizing scrollbar
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.
I have a div which has a responsive image in it that is full width.
The height of the image and width adjusts as the browser resizes.
I would like to position another div right below this div that has the responsive image.
I can't seem to get it right.
Here's what I have:
<div style="display: block; width: 100% !important; height: auto; display: block; background: #ffffff; text-align: center;">
<div style="display: block; min-height: 374px;">
<img src="yahoo.png" title="THE RESPONSIVE IMAGE" />
</div>
<div style="width: 100%; height: 10px; background: #D9594C; position: relative;"></div>
</div>
You can see the div I want to position below the responsive image has a background.
Thanks so much for your help!
It's hard to say for sure, but I think there's confusion here around the height and the responsiveness.
Firstly, the reason you get that big gap under your image is because it's parent div has min-height: 374px set on it. The div will expand to fit the image's height, so this isn't really needed.
However, you also talk about how the height and width of the image should adjust when resizing. To do that, you'll need to make sure the image has width: 100% so it is only ever as wide as it's parent div.
I've separated out your HTML and CSS, and added comments in the CSS to try and help.
Hopefully, it's close to what you wanted.
http://jsbin.com/orahuPEh/1/edit
If I am understanding your question right, your problem is that your divs are not butting up against each other properly. Is this correct?
Since you are obviously at the point where things aren't necessarily working right anyway,
I would start by setting the height of the img's parent div to the actual height of the image.
If this does not work use negative margin on either of the divs:
div style="margin-top:-30px;
Hope this helps, let me know if there is anything I can clarify.
Don't give the height of the image div, keep it height:auto, div will take image height. As you mention its responsive image than div will take height as per image height.
<div style="display: block; height: auto;">
working Demo
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.
I have a header DIV which is 1400px wide and contains a background image which must always stay centered.
I have a site that needs to be 960px wide.
When I resize the browser (shrink it), I don't want any horizontal scrollbars until we hit 960px, but the larger width on the header/background is causing this.
Is it possible to stop all horizontal scrollbars on resize until 960px AND keep the background image in the header div centered??
Any help appreciated! Some code I set up here here for a quick test...
http://jsfiddle.net/gVuvk
The background image has a width of 1400px. I need the scrollbars to start at 960px - NOT 1400px. Is this possible?
change #header width from fixed pixels to 100%
Demo: http://jsfiddle.net/wNSTD/3/
Try fiddling with min-width, if that does not work, use margins, css auto-margins can be useful here. So, make the structure like this:
<style>
.center_image
{
margin: auto auto; // or you can modify the x or y seperately
background-image:url("somesite.jpg");
}
</style>
<div class="outer">
<div class="center_image">
Set the width of header to 100% and center the background image.
background: url(http://fade.com.au/test/bg-image.jpg) no-repeat center center;
width: 100%;
Demo: http://jsfiddle.net/post_erasmus/Hn6Zb/1/