CODEWITHSUNDEEP
javascriptcssimageresize
Sofi Smith
Sofi Smith

Reputation: 172

Forcing images to dynamically resize to container/browser height with Javascript

Basically I'm looking to get my horizontal scrolling sites (using indexhibit) images to be relative to browser size. At the moment using the following code it seems to resize the height but not the width?

This is my javascript that I found from this thread http://www.indexhibit.org/forum/thread/11531 which I've attached in an external js doc.

function resizeit() { showHeight('document', $(window).height());
function showHeight(ele, h) {
$('.picture img').css( 'height', h -30 );
$('#img-container').css( 'height', h -30 );

}
var    sum = 0;
$('.picture img').each(function() 
{ 
sum += $(this).width() +21;

}); 
$('#img-container').width( sum );    
}

$(window).resize(function() {

resizeit();
});

$(window).load(function(){
resizeit();
});

And this is my PHP 

<script type='text/javascript' src='{{baseurl}}/ndxzsite/js/images.js<last:page:version     
/>'></script>

<last:page:css />
<last:page:onready />
<plugin:backgrounder />
</head>
<body class='{{object}} section-{{section_id}} exhibit-{{id}} format-{{format}}'>
<div class="header">
<h1><a href='/' title='{{obj_name}}'><img src="files/lucy-bower-logo.png" alt="lucy bower logo"></a></div>
<div id='index'>

<div class='menu'>

<div class='top'>{{obj_itop}}</div>
<plugin:index:load_index />
<div class='bot'><p>© Lucy bower 2014</p> <p>Built by <a href="http://www.neptik.com">Neptik</a></p>
{{obj_ibot}}</div>

<last:page:append_index />
</div>
</div>

<div id='exhibit'>
<div class='container'>

<div class='top'><!-- --></div>
<!-- text and image -->
<plugin:page:exhibit />
<!-- end text and image -->

</div>
</div>
<plugin:page:append_page />
<plugin:page:closing />
</body>

And my images end up sitting in a stack like this html and css stack![][1]

I just don't really understand what I'm doing wrong if it's worked for other people :( is there any other way of doing it?

Upvotes: 0

Views: 1535

Answers (2)

Nico O
Nico O

Reputation: 14102

I'am not really sure if you can use it. But the whole layout can be done with CSS alone, here is an example.

Demo Here: http://jsfiddle.net/T9Zz5/1/

*
{
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html, body
{
    height: 100%; 
    overflow-y: hidden; 
    margin:0;
    padding:0;
}

.wrap
{
    overflow-x: visible;
    white-space: nowrap;
    height: 100%;
    width: 100%;
}

.left
{
    width: 200px;
    float: left;
}

.item
{
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 4px;
    background-color: green;
    margin-left: -4px;
    text-align: center;
    vertical-align: top;
}

.item img
{
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.item:before
{
    display: inline-block;
    content:"";
    vertical-align: middle;
    height: inherit;
}


/* First Item width - nav width */
.left + .item
{
    width: calc( 100% - 200px );
    margin-left: 0px;
}

.item:nth-child(2){
    background-color: yellow;
}

.item:nth-child(3){
    background-color: purple;
}

HTML:

<div class="wrap">
    <div class="left">
        <ul>
            <li>Nav</li>
            <li>Nav</li>
            <li>Nav</li>
            <li>Nav</li>
        </ul>
    </div>

    <div class="item"><img src="http://www.placehold.it/1000x800" /></div>
    <div class="item"><img src="http://www.placehold.it/1000x100" /></div>
    <div class="item"><img src="http://www.placehold.it/1000x800" /></div>
</div>

Upvotes: 0

Dean Meehan
Dean Meehan

Reputation: 2646

Instead of sizing the img tag, I would personally recommend making the image file the background-image of the parent div ie.

<div style="background-image=url('locationofImage.png'); background-size:cover;"></div>

background-image:url(''); - Sets the background image

background-size:cover; - Set how the image should fill the div

This will simply position the image in the background of the div to ensure there is no whitespace. You then can using css set the height and width of the div to fit the space you need.

Upvotes: 2

Related Questions