Changing/ Resizing The Image According To The Window Size

September 30, 2023 Post a Comment

I want to do something like YouTube header. When the width of the window reduces, its logo changes and gets rid of two of the menu icons on the right. codepen.io function adjustIma

Solution 1:

Jquery way:-

this can be achieved easily in media query in CSS itself, but it seems you need in jquery way. so answering in jquery way

add separate class for both widths and toggle between these classes while resize by like $('#logoDiv').removeClass("desktop"); $('#logoDiv').addClass("mobile");

Check this fiddle

Pure CSS way:-

this can be achieved easily in media query in css itself

Check this fiddle

Solution 2:

for doing this you can use media queries in css for an example

headers{
  width:100%
}
.sidemenu{
  width:100px;
  float:right;
}
.logo{
  width:100px;
  float:left;
}

/* Your styles for small screen */@mediaonly screen and (max-width: 500px) {
  .logo{
    width:50px; 
  }
  .sidemenu{
    display:none;
  }
}

https://jsfiddle.net/9h5smzuh/

Solution 3:

Don't need javascript ... can accomplish it with css

MENU1 MENU2

#container {
  margin:0 auto;
    margin-bottom: 10px;
    padding: 7px5px7px5px;
    max-width: 1250px;
    height: 30px;
    border: 1px solid green;
  text-align: center;
}


#logoDiv{
    float:left;
    margin: 0;
    width: 165px;
    height: 30px;
  background-color: red;
}


#middleDiv {
  display: inline-block;
    margin:0;
    padding: 0;
    width: 35%;
    height: 30px;
    border: 1px solid blue;
}

#md{
    margin:0;
    height: 25px;
    padding-top: 0;
    width: 100%;
    border: 1px solid red;
}

.rightDiv {
  float:right;
    margin-left: 5px;
  width: 60px;
  border: 1px solid red;
}

@media (max-width: 600px){
  #logoDiv{
    width: 30px;
    float: right;
    background-color: blue;
  }
}

Solution 4:

The bets way to achieve your requirement will be using media queries, rather than using jQuery. Media query itself provide best methods to adjust the screen representations so that you wont need to go for jQuery or javascript.

<!DOCTYPE html><html><head><style>#container {
            margin: 0 auto;
            margin-bottom: 10px;
            padding: 7px5px7px5px;
            max-width: 1250px;
            height: 30px;
            border: 1px solid green;
            text-align: center;
        }
        
        #logoDiv {
            float: left;
            margin: 0;
            width: 165px;
            height: 30px;
            background-color: red;
        }
        
        #middleDiv {
            display: inline-block;
            margin: 0;
            padding: 0;
            width: 35%;
            height: 30px;
            border: 1px solid blue;
        }
        
        #md {
            margin: 0;
            height: 25px;
            padding-top: 0;
            width: 100%;
            border: 1px solid red;
        }
        
        .rightDiv {
            float: right;
            margin-left: 5px;
            width: 60px;
            border: 1px solid red;
        }
        
        @media (max-width: 600px) {
            #logoDiv {
                width: 30px;
                float: right;
                background-color: blue;
            }
            
            .rightDiv {
                display: none;
            }
        }
    </style></head><body><divid="container"><divid="logoDiv"></div><divid="middleDiv"><inputid="md"type="text"></div><divclass="rightDiv">MENU1</div><divclass="rightDiv">MENU2</div><divclass="rightDiv">MENU3</div></div></body></html>

What you want to do is just put your requires styles inside

@media (max-width: 600px) {

}

This will be triggered when the size of your screen goes below 600px. I have added some sample code that I came to understand from your requirement. Look more about media queries here.

Html5 Academy

Changing/ Resizing The Image According To The Window Size

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Changing/ Resizing The Image According To The Window Size"