fluid-image1

by ponke008

HTML

<body>
    <div id="container">
    <img id="sixteennine" src="https://dl.dropboxusercontent.com/u/3335739/site/images/oregon169.jpg">
    <img id="fourthree" src="https://dl.dropboxusercontent.com/u/3335739/site/images/oregon43.jpg">
</div>
</body>

CSS

body, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    overflow-x:hidden;
} 
@media screen and (max-aspect-ratio: 4/3){
#container {
    position: relative;
    width:100%;
    height:auto;
}
#fourthree {
    width:100%;
    height: auto;
}
#sixteennine {
    display: none;
}
}
@media screen and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 16/9){
    #container {
    float:right;
    right: 50%;
    position: relative;
}

#sixteennine { /*16:9 ratio image*/
    position: relative;
    height: 100%;
    float: right;
    right: -50%;
}
#fourthree {
    display: none;
}
}
@media screen and (min-aspect-ratio: 16/9){
#container {
    position: relative;
    width:100%;
    height:auto;
}

#fourthree {
    display: none;
}
#sixteennine {
    width:100%;
    height: auto;
}
}