Hi I believe my webpage is written ok to make sure that when the browser window height changes the images size changes, however when adjusting the height only of the browser window the images do not change in width and height in order to be fully visible.
Take a look at the jsfiddle.
Code:
<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