hi believe webpage written ok make sure when browser window height changes images size changes, when adjusting height of browser window images not change in width , height in order visible.
take @ jsfiddle.
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <style> html, body { position: relative; height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: none; color: none; margin: 0; padding: 0; overflow:hidden; } .page { background-color: white; width: 80%; height: 80%; } .page-text { text-align: justify; position: absolute; top: 50%; left: 50%; -moz-transform: translatex(-50%) translatey(-50%); -webkit-transform: translatex(-50%) translatey(-50%); transform: translatex(-50%) translatey(-50%); } .table1 { width: 90%; height: 90%; font-size: 0.7vw; margin: 0 auto; text-align: justify; } .responsive { position: relative; max-width: 90%; max-height: auto; } .container { text-align: left; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width: 100%; height: 100%; position: relative } video { position: absolute; top: 0px; left: 0px; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1000; overflow: hidden; } </style> <!-- jquery resize --> <script> causerepaintson = $("body, fix, h1, h2, h3"); $(window).resize(function() { causerepaintson.css("z-index", 1); }); </script> </head> <body> <div class="container"> <video id="video" preload="auto" poster="http://dummyimage.com/600%20x%20400/17c700/000ed1.jpg" autoplay muted loop> </video> <div class="page"> <h1>test</h1> <table cellpadding="5" class="table1" > <tr> <td colspan="2" valign="middle" style="width:50%; text-align: left;"> <img src="http://dummyimage.com/315%20x%20450/000/fff.jpg" class="responsive"></img> </td> <td colspan="2" valign="middle" style="width:50%; text-align: right;" > <img src="http://dummyimage.com/315%20x%20450/000/fff.jpg" class="responsive"></img> </td> </tr> <tr> <td width="25%" valign="top" style="text-align: justify;">lorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean commodo ligula eget dolor. aenean massa. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. nulla consequat massa quis enim.</td> <td width="25%" ><!-- leave cell blank --></td> <td width="25%" ><!-- leave cell blank --></td> <td width="25%" valign="top" style="text-align: justify;">lorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean commodo ligula eget dolor. aenean massa. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. nulla consequat massa quis enim.</td> </tr> </table> </div> </div> </body> </html> any ideas?
thanks
welcome so. first off feel should point out responsive websites change depending on width of site, , not height.
that said, after looking @ jsfiddle, seems working fine. websites should not adjust depending on height of browser, width.
Comments
Post a Comment