How do I resize a div relative to browser window size?


Tags: javascript,css,css3,resize,window

Problem :

I'm trying to make a slideshow that resizes proportionally relative to the browser window size, but nothing I try seems to work. The following HTML and CSS is what I use so the slideshow stays centered on my page when the browser window is resized, but it does not yet allow for the slideshow to be resized.

How would I go about doing this? My original thought was simply to give the #parent div a max-width or width of some percentage, but it doesn't work. I thought everything inside, as their widths are all set to 100%, should resize with the #parent div, but they don't. I'm not even sure that the #parent div is even resizing at all...

The img is simple y a placeholder for six images I have in my actual code, but that doesn't make any difference.

#parent {
	height:100%;
}

.fadein {
	position:relative;
	top:70px;
	width:100%;
	height:100%;
}

.fadein img {
	position:absolute;
	left:50%;
	top:50%;
	-webkit-transform: translate(-50%, -0%);
	-moz-transform: translate(-50%, -0%);
}

#slideshow {
	max-width:100%;
	width:100%;
	height:100%;
}
<div id="parent">
			
	<div id="slideshow">
			
		<div class="fadein">
				
			<img src="http://placehold.it/350x150" />
			
		</div>
			
	</div>
				
</div>



Solution :

.fadein img does not have width set to 100%. Also because it is absolutely positioned, the width will be referring to the width of the window. This shouldn't matter though because your parent divs are set to 100%, so either way will look the same.

Edit: also in the future when you have a layout issue, it is really helpful to put a border around your divs. As mentioned in the comments


    CSS Howto..

    How to write specific CSS for mozilla, chrome and IE

    How to change the Fill color of an SVG path via CSS

    How can i make image size big using css?

    How do I center Glyphicons horizontally using Twitter Bootstrap

    how to prevent link padding during hover from extending paragraph padding

    How to make horizontal lines with words in the middle using CSS?

    How to give Internet Explorer different CSS lines?

    How can I change the image folder name in css files dynamically?

    How to modify and save html/css in server-side?

    In CSS, how to hover a background over an image

    How to install custom fonts in css

    How to change the text color of the clicked row of table with css and jquery

    How to achieve a two column centered layout, with the main column expandable on wider screens?

    How do I achieve my bootstrap nav design?

    How to handle text wrapping in CSS? [duplicate]

    How to use external css file to style a javafx application

    How to locate a pointed div element in css

    How to define css selector class prefix with SASS

    How to give line-break from css, without using
    ?

    How to use SVG fragment identifier for CSS background image on iOS?

    How to create a pop-up div on mouse over and stay when click

    How to Fade in AFTER the Page has Loaded: Javascript

    jQuery + CSS text show not working

    How to add new CSS rule to inner id

    How can I escape my application.html.erb file

    how to make the img at the left side and the texts at the right side vertically line up

    How to change the css and html file at the same time

    How to create hover effects for all links EXCEPT the one you hover on using javascript/jquery/css?

    How to get global selector inside emulated view encapsulation (CSS / Angular2)

    How to use the css height attribute for showing scroll bar in HTML table