Changing Browser Height Doesn't Change Responsive Image Height

**452wfr234** · Jul 09th, 2015, 05:16 PM

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

**Web Design Forums** · Jul 09th, 2015 05:16 PM

**timbo89** · Jul 09th, 2015, 05:39 PM

It works for me using Chrome, although the table cell height doesn't change.

I'd try to avoid using tables if you can, they're horrible :P

**perezpalafox87** · Jul 11th, 2015, 07:40 PM

No ablo ingles

Enviado desde mi TR10CS1 mediante Tapatalk

Thread: Changing Browser Height Doesn't Change Responsive Image Height

LinkBack

Thread Tools

Search Thread

Display