在CSS中使图像响应

Question

http://www.dirkdunn.com/web2

我最近做了一个响应式布局，设置了..

max-width:100%;

谷歌浏览器中的

属性，适用于调整标题图像大小，但是，在其他浏览器（如firefox）中，图像与左侧大小的父容器重叠。

我熟悉scott jehls picture.js polyfill，但是指定每个屏幕大小的图像大小听起来像图片标签内的头疼，有没有办法在其他浏览器中解决这个问题，类似于Google Chrome如何自然调整大小？

或者至少，是否有某种数学公式可以通过浏览器宽度了解正确的图片大小？感谢。

Answer 1

只需删除图像的h1-parent即可。 （FF 32）

Answer 2

试试这个

max-width: 100%; 
display:block; 
height: auto;

Answer 3

假设您试图将徽标居中。

我会移除浮动：从H1开始并删除你拥有的边距。我会在H1上添加text-align：center。这将解决您的响应式徽标问题并使徽标居中。

您当前的CSS

#headlogo {
    float: right;
    margin: 0 15% 0 0;
}

提议的解决方案CSS

#headlogo {
    text-align: center;
}

Answer 4

您已将max-height的{​​{1}}设置为img，但您未定义其100%个父级。因此，浏览器确定100％的东西会让人感到困惑。

让我们给父母一个width -

width

同样设置保证金，您可能希望将#headlogo { width: 100%; } 用于margin: 0。