CODEWITHSUNDEEP
jqueryhtmlcss
israel love php
israel love php

Reputation: 457

The height image doesn't match to div in a different resolutions

I'm building a web page which should adapt itself to all resolutions. I think that for me define each element with the percent that the page will open different resolution element will be relative to the page size. I do not know how accurate or correct if I'm wrong, Correct me please. Since I work with size in units of percent. I have a logo image in a div(#thirdLine) that is greater than the image height . And I want to adjust the height of the image to div through css is it possible? If it's not possible. I have code in jQuery $('#logo').css('height',$('div.thirdLine').css('height');​ but is not working. What do you Recommend me to do thanks. see example

css code:

    #thirdLine{
    background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
    background-repeat:repeat;    
    border-color: #316897;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    line-height: 7px;
    height:25%;
    color: #745B1B;
    font-family: 'CarterOneRegular';
    font-size: 25px;
    line-height: 34px;
    margin: 0;
    padding: 0;
    text-shadow: 2px 2px 0 #FFF0D8;
    width: auto;
}
#logo{
    border-color: #316897;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    float:left;
}​

html code:

<div id="thirdLine"><img id="logo" src="http://www.centerwow.com/linkguide/guide_files/pic/Notebook.png" alt="Link Guide"  />this is div id  thirdLine</div>​

Upvotes: 0

Views: 370

Answers (2)

Aram Kocharyan
Aram Kocharyan

Reputation: 20431

Web pages can adapt to different resolutions, and these are called fluid layouts. However, these will typically adapt the width and not height of elements, since all web pages can be scrolled vertically.

Basically, I just set a static height of 50px for the div, the image, and the line-height, which controls the line height of text.

http://jsfiddle.net/aramk/p2vjf/26/

#thirdLine,
#thirdLine img {
    height:50px;
    line-height:50px;
}

You don't need any jQuery for this kind of layout, and I would advise you not to use jQuery for changing layouts that aren't interactive (e.g. respond to mouse events etc.) and leave all the styling to CSS if possible.

Upvotes: 1

Tats_innit
Tats_innit

Reputation: 34107

Hiya working demo : http://jsfiddle.net/p2vjf/24/ (You can comment out the alert in the jsfiddle)

your $("div.thirdline") was undefined And this will do the trick for you:

Use of max-hieght for images for more info read this very nice explanation here: How do I auto-resize an image to fit a div container

Jquery code

$('#logo').css('max-height',$('#thirdLine').css('height'));

Hope this helps, cheers!

Upvotes: 0

Related Questions