Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Member
    Join Date
    Jun 2014
    Posts
    46
    Member #
    39433
    Liked
    1 times

    Changing Browser Height Doesn't Change Responsive Image Height

    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

  2.  

  3. #2
    Senior Member timbo89's Avatar
    Join Date
    May 2015
    Location
    Adelaide, South Australia
    Posts
    126
    Member #
    49722
    Liked
    26 times
    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

  4. #3
    Junior Member
    Join Date
    Jul 2015
    Posts
    1
    Member #
    50985
    No ablo ingles

    Enviado desde mi TR10CS1 mediante Tapatalk


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 06:21 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com