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

【问题标题】：Changing Browser Height Doesn't Change Responsive Image Height更改浏览器高度不会更改响应式图像高度
【发布时间】：2015-09-28 13:30:00
【问题描述】：

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

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

有什么想法吗？

谢谢

【问题讨论】：

你的小提琴不起作用

标签： css html image responsive-design

【解决方案1】：

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

也就是说，在查看您的 JSFiddle 之后，它似乎工作得非常好。网站不应根据浏览器的高度进行调整，仅根据宽度进行调整。

【讨论】：

嗨，迈克尔，感谢您的欢迎和回复。我觉得在这个例子中，我给了你标题，而图像奇怪地从它们所在的容器中掉出来，看不到。
...这有点问题，即使“网站不应该根据浏览器的高度进行调整，只能根据宽度进行调整。”正如你所说。
响应式网页设计是关于使您的应用程序适应用于访问它的设备。如果这意味着根据宽度或高度或两者进行调整取决于应用程序。

【解决方案2】：

max-height 的值不能为 auto。
这里是最大高度的可能值：none|length|initial|inherit;

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

【讨论】：

高度似乎运作良好，谢谢。如何将其更改为类似“表格”的格式，其中有两个图像并行，如示例中所示。另一件事是，现在您的示例不响应宽度变化。我会去的。再次感谢。