CODEWITHSUNDEEP
javascriptjquerycsshtmlimage-resizing
KingPolygon
KingPolygon

Reputation: 4755

Resizing Images As Window is Resized?

Currently I have four images side by side. When the window is resized or viewed on a smaller device it does a line jump (three images and the fourth one beneath it). However what I want is for all four images to just shrink relative to the window size. To make it clear, I've included some images and my code. Here's the jsfiddle as well: http://jsfiddle.net/hxeJb/

What I currently have.

^ That is what I currently have.

enter image description here

^ That is what I want to achieve.

HTML:

<div id="headerline">
<img src="http://s21.postimg.org/l6t6akypj/line.jpg"/>
</div>

<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png">
    </div>

CSS:

#headerline {
    width: 100%;
    overflow: hidden;
    margin: -10px auto 20px auto;
}

#menu {
    max-width: 700px;
    text-align: center;
    margin: auto;
}
#menu img {
    width: 150px;
}

Upvotes: 1

Views: 237

Answers (4)

Surama Hotta
Surama Hotta

Reputation: 130

Try with the width in percentage to set the image size as per the browser width. It's always preferable to set the width in percentage(instead of pixel) while re-sizing the element based on window re-sizing.

#menu img {
    width: 25%; //give the width as per the requirement
}

Hope this will solve your problem :)

Upvotes: 0

Francis Kim
Francis Kim

Reputation: 4285

The other answers are probably all correct but you may want to add a max-width: 150px; so that hte image does not expand too big and lose quality.

#menu img {
    width: 30%;
    max-width: 150px;
}

Fiddle: http://jsfiddle.net/hxeJb/4/

Upvotes: 0

Prashant
Prashant

Reputation: 702

Observing your CSS part in jsFiddle, I think assigning width in percentage rather than fixed pixels will resolve your problem.

You can try this instead of current CSS.

#menu img {
    width: 31.33%;
}

Hope this might help you.

Upvotes: 0

Doan Cuong
Doan Cuong

Reputation: 2614

http://jsfiddle.net/hxeJb/2/

#menu img {
    width: 20%;
}

See if this help you, just don't provide a fixed width, let image width relative to its parent width

Upvotes: 3

Related Questions