Changing Browser Height Doesn't Change Responsive Image Height

Discussion in 'HTML & Website Design' started by 7643sfsag6, Jul 9, 2015.

0
  1. #1
    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.
    ========================================
    <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
     
    7643sfsag6, Jul 9, 2015 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Tables for layout, scripttardery for nothing, flex for nothing, screwing with values you are probably better off NOT messing with (like the font rendering tech), no fallback video formats, static images in the markup that are likely presentational, fixed height measurements -- what has ANY of that to do with responsive layout?!?

    Your entire markup and concept is flawed and has little if anything to do with what responsive design is even about -- though it's hard to weigh in meaningfully without seeing the images involved, generally speaking you have a laundry list of how NOT to build a website right there.

    Ideas? STOP declaring % widths, STOP declaring heights that are a fixed percentage of the display height, and STOP pretending it's 1997 with the tables for layout nonsense... and if those images are presentational and not content, STOP putting them in the markup. Those all reek of "not viable for web deployment" concepts and the antithesis of accessible design -- remember, responsive layout is just the final step in a long list of accessible design concepts, NONE of which you seem to be employing.
     
    deathshadow, Jul 9, 2015 IP