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" );
});
Related
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.
I have set up a web page using an image in a div called slideshow. The div is supposed to be a max-width of 1600px and a max-height of 600px (width and height of the original jpg used here) and to shrink down dynamically when the screen is smaller or resized.
This works fine because the behavior of the image is set by CSS as follows :
.slideshow img{
margin:0 auto;
width: 100%;
max-width: 1600px;
min-width: 900px;
}
Now I would like to achieve the same effect by replacing the image with the Camera Slideshow from Pixedelic. But here I can't control the image with .slideshow img{} since the script uses a div instead of the image tag.
Width and height of the camera slideshow are controlled by a jQuery function.
I have put the slideshow in a .slides div which I try to control by CSS, like this :
.slideshow .slides{
display: block;
margin:0 auto;
max-width: 1600px;
max-height: 600px;
overflow:visible;
}
(Overflow is left visible to see what happens)
When I assign a height value (ie 600px) in the function, the slideshow loads at it's max height but doesn't shrink when the page is resized down : http://www.centredelafontaine.be/testpage1.html
When I leave height and width values blank in the function, the slideshow shrinks on resize but opens with a height of 800px (?) and crops the even greater image inside, overflowing the div placed below : http://www.centredelafontaine.be/testpage2.html
Can anyone help me on this issue ?
Place a img tag inside the div which is contained by the slideshow and you will be able to modify those image (slideshow elements) proprieties through the CSS code.
<div id="image" div class="Slides w3-display-container">
<img src="your_image.png" height="600" width="1600">
</div>
If you can't work it out leave me a reply and I'll make a demo html
Set only image min height. Slidehow container will depend on image height. Means no need to set slidehow container height.
You can set the portrait property to true and the images will not be cropped.
jQuery('#your-camera-gallery').camera({
portrait: true,
});
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.
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/