CODEWITHSUNDEEP
javascriptcssimagejquery-mobile
horin
horin

Reputation: 1662

Resizing image with screen size

I am using thw folowing code:

<div data-role="homepage">
    <div data-role="content">   
        <div id="selectCircle">
        <img src="res/images/zive.png" alt="Zive.sk" id="ziveCircle"><br>
        <img src="res/images/auto.png" alt="AutoMoto.sk" id="autoCircle">
        <img src="res/images/mobil.png" alt="MobilMania.sk" id="mobilCircle">
        </div>
        <!-- <a href = "feeds.html" rel="external" data-role="button">index</a> -->
    </div>
</div>

and the folowing CSS:

#selectCircle{
    position:fixed;
    top: 10%;
    width: 100%;
    text-align: center;
}
#mobilCircle{
    position:absolute;
    right: 50%;
}
#autoCircle{
    position:absolute;
    left: 50%;
}

everything looks great when the images can have their full size. But I want them to resize with screen size change. So when I diminish browser windows or load the code on mobile (which will not let the images to display in full size) the images will resize to fit div and keep their position inside div.

PS: I have tried to display div border and it look like it has height of first image, but I want it to include also bottom two images.

EDIT: Here are links to images: image1, image2, image3 and here is how I want it to looks like image.

Upvotes: 1

Views: 1405

Answers (2)

Stefan
Stefan

Reputation: 352

try using window.innerWidth and window.innerHeight. Combined with onresize. The links below show examples of how you can achieve this. When you know the size of the window, then you can change the size of the pictures appropriately

links: http://www.w3schools.com/jsref/prop_win_innerheight.asp

http://www.w3schools.com/jsref/event_onresize.asp

Upvotes: 0

crowjonah
crowjonah

Reputation: 2878

using position: fixed and position: absolute is going to make it a pain to develop responsively. You should try and get comfortable with relative positioning and floating elements.

Here's an example that I think accomplishes what you're after.

Upvotes: 3

Related Questions