Question

嗨我相信我的网页写得好，以确保当浏览器窗口高度改变图像大小更改时，但是当仅调整浏览器窗口的高度时，图像的宽度和高度不会改变以便完全可见。

<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>

有什么想法吗？

由于

Answer 1

欢迎来到 SO 。首先，我觉得我应该指出响应式网站会根据网站的宽度而不是高度而变化。

那就是说，看了你的JSFiddle之后，它似乎工作得非常好。网站不应该根据浏览器的高度进行调整，只有宽度。

Answer 2

max-height的值不能为auto。
以下是max-height的可能值：none | length | initial | inherit;

我建议在你的小提琴中使用一个更简单的例子，尤其是没有表格，以便您可以了解该特定元素的内容。试试这个：http://jsfiddle.net/o145t6rm/

更改浏览器高度不会更改响应图像高度

2 个答案: