Question

我正在尝试为高度完成图像尺寸调整（我知道宽度：100％，高度：自动调整宽度）。以下设置适用于Safari（~8.02），但Chrome和Firefox（最新版）根本不关心。有任何想法吗？如果不存在CSS hacks，我可以使用jQuery解决方案（我猜）。

＆＃13;

body, html {
  width:100%;
  height:100%;
}

body {
  background: lightgreen;
}

.full {
  width:100%;
  
}

.block {
  background: lightcoral;
  width: 80%;
  text-align: center;
  position: absolute;
}

.logo {
  max-width: 100%;
  max-height: 80%;
}

＆＃13;

<div class="full">
  <div class="block">
    <img src="http://placehold.it/709x534" class="logo">
  </div>
</div>

＆＃13;

Answer 1

除了上面的CSS之外，在容器上声明100％的高度（在本例中为.block）解决了Chrome和Firefox上的问题。它现在按预期匹配Safari行为。

Answer 2

使用以下代码行，或者您可以在我的网站上查看PawanMall.net

＆＃13;

.post-img-responsive {
  max-width: 100%;
  height: auto;
}

＆＃13;

<img src="http://4.bp.blogspot.com/-VP1QZ9R89Y4/VMwZS4KbJMI/AAAAAAAA1IU/pM2pMEJJd6k/s1600/12%2B-%2BCSS3%2BBlockquote%2BEffects%2BDemo.jpg" class="post-img-responsive" />

＆＃13;

Answer 3

你是否试图在超过80％的高度后故意扭曲你的形象？看看这篇文章...... Max-height ignored in Firefox, works in Chrome and Safari

Answer 4

除了上面的CSS之外，在容器上声明100％的高度（在本例中为.block）解决了Chrome和Firefox上的问题。它现在按预期匹配Safari行为：

body, html {
  width:100%;
  height:100%;
}

body {
  background: lightgreen;
}

.full {
  width:100%;
  
}

.block {
  background: lightcoral;
  width: 80%;
  text-align: center;
  position: absolute;
  height: 100%;
}

.logo {
  max-width: 100%;
  max-height: 80%;
}

<div class="full">
  <div class="block">
    <img src="http://placehold.it/709x534" class="logo">
  </div>
</div>

最大高度的流体图像响应在Chrome，Firefox等中不起作用，但在Safari中有效

4 个答案: