Question

因此，我正在为某人开发一个网站，并且该布局在Firefox中完美运行，图片继承了桌面单元格的高度，但在Chrome中它设置了它＃39 ; s高度为实际图像尺寸的100％。

第一个是chrome，第二个是Firefox。我目前只将CSS应用于第一张图片。

以下是相关的CSS：

在图片上：

  vertical-align:bottom;width:100%;height:100%

在表格单元格上：

#navbar-image{
    border-right-style:solid;
    border-bottom-style:solid;
    border-width:5px;
    border-color:#FF8B08;
    padding:0px;
    margin:0px;
    width:17.5%;
    height:10%;
    max-height:10%;
}

CSS行：

#nav-bar{
    height:10%;
    max-height:10%;
    padding:0px;
    margin:0px;
    box-shadow: 1px 1px 30px #060606;
    border-left-style:solid;
    border-right-style:solid;
    border-bottom-style:solid;
    border-width:5px;
    border-color:#FF8B08;
    background-color:#252525;
    border-spacing: 0px; 
    position:relative;
    left:25%;
    top:0%;
    z-index:2;
}

这是一个JSFiddle版本：https://jsfiddle.net/yrzccn3j/ 有什么想法吗？

Answer 1

如果我理解，您在<img>标记中包含此代码：

img {
     vertical-align:bottom;
     width:100%;
     height:100%;
}

您应该像这样更改高度属性：

img {
     vertical-align:bottom;
     width:100%;
     height:auto;
}

这适用于所有浏览器，并保留图像的比例。

在Chrome中，图片不会继承高度，但会在Firefox中继承

1 个答案: