Question

我有一个名为“nav”的父div容器，它充当导航栏以及充当选项的子div。

问题：我希望在此导航栏中左侧有一个图像。然而它根本没有显示（没有宽度），除非我使div“logo”具有固定的宽度和高度。当我这样做时，图像将无法适当地重新调整大小以适应div。我只看到图像的一部分。此外，我希望div / image相对于div“name”的大小进行缩放，而不是相反。举个例子给div“logo”一个100px的宽度/高度，看看它改变了div“nav”的大小。图像应重新调整为与div“name”相同的高度。如果div“name”的高度为30px，则div“logo”的宽度和高度应为30px（给出或取一个像素）。

我该怎么做？ div有可能吗？如果不是我能做到的最接近的方式（我更喜欢使用div）？

代码：http://jsfiddle.net/x3f63cye/3/

html, body {
    height: 100%;
    margin: 0px;
    font-family:'Myriad Pro Regular';
    color:#1E3264;
}
.flexer {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
div#nav {
    position:relative;
    width:100%;
    background: white;
    box-shadow: 0px 0px 3px 1px #888888;
}
div#logo {
    background-size:contain;
    background: url('https://lh5.googleusercontent.com/-SnVrCsddc7c/AAAAAAAAAAI/AAAAAAAAAEM/v3eM1AEdb70/photo.jpg') center center no-repeat;
    border-right-style:solid;
    border-width:1px;
    border-color: rgba(0, 0, 0, 0.15);
}
div#name {
    padding: 0% 5% 0% 5%;
    border-right-style:solid;
    border-width:1px;
    border-color: rgba(0, 0, 0, 0.15);
    font-size:2em;
    align-items:center;
    justify-content: center;
}

<div id="nav" class="flexer">
    <div id="logo" class="flexer"></div>
    <div id="name" class="flexer">Choice1</div>
</div>

Answer 1

使用background-image时，尤其是使用background-size: contain;时，只有具有这些属性的元素存在时，才能显示图像。

话虽如此，你必须（如果元素将为空）应用height或min-height及其width对应物来为背景图像提供显示内容英寸

当我这样做时，图像将无法适当地调整大小以适合div内部。我只看到图像的一部分。

The image shows up find for me，但我确实编辑了您的代码：

div#logo {
    background: transparent url('https://lh5.googleusercontent.com/-SnVrCsddc7c/AAAAAAAAAAI/AAAAAAAAAEM/v3eM1AEdb70/photo.jpg') no-repeat center/contain;
    border-right-style:solid;
    border-width:1px;
    border-color: rgba(0, 0, 0, 0.15);
    height: 20px;
    width: 20px;
}

此外，我希望div / image相对于div＆＃34; name＆＃34;的大小进行缩放，而不是相反。

然后您应该使用维度的相对值，例如%或ems，但这不会更改resize，see fiddle上的图片维度，就像#name在height上更改resize一样。

如何使容器内的div具有与其他div兄弟一样大小的图像？

1 个答案: