CODEWITHSUNDEEP
androidhtmlcsstwitter-bootstrapcordova
Ajay Kulkarni
Ajay Kulkarni

Reputation: 3039

Keeping the height and width of an image same in both landscape and portrait mode without using media queries

I've a requirement where I should write an hybrid android/iOS app which is developed by html, css, js, phonegap. I'm not supposed to use my own media queries. So I'm using bootstrap. I've an image in header as shown in screen shot (this is in portrait mode):
this is in portrait mode
But when it is changed to landscape mode, image comes out of header as shown:
landscape
How can I keep the image same in landscape mode without using media queries?
Here is the code.
CSS: 

#headDiv {
    display: flex;
    flex-flow: column;
    justify-content: center;
    background-color: #FFA500;
    height: 50px;
    padding-top: 1%;
}
.home {
    margin-left: 4%;
}
.imgHeader {
    display: flex;
    flex-flow: column;
    justify-content: center;
    max-width: 100px;
}

Upvotes: 1

Views: 643

Answers (1)

Bjoerg
Bjoerg

Reputation: 1331

Your inner div's grow with the content right now. You have to limit that with height:100%:

.home {
    margin-left: 4%;
    height:100%;
}
.row {
    height: 100%;
}

Also set the max-height of the image to 100%:

max-height: 100%;

I added a short JavaScript to show whats happening when the size of the header changes, just click on the home button: http://jsfiddle.net/gy69L77p/3/

Upvotes: 1

Related Questions