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

【问题标题】：How do i make make a div inside a container have an image that is sized like its other div siblings?如何使容器内的 div 具有与其他 div 兄弟姐妹一样大小的图像？
【发布时间】：2016-02-04 09:04:24
【问题描述】：

我有一个名为“NAV”的父DIV容器，它充当了导航栏以及作为选择的子女士。

问题：我想在这个导航栏内一直有一个图像。但是，除非我使 div“徽标”具有固定的宽度和高度，否则它根本不会显示（没有宽度）。当我这样做时，图像将不会适当地重新调整大小以适合 div 内。我只看到图像的一部分。此外，我希望 div/图像相对于 div“名称”的大小进行缩放，而不是相反。举个例子，给 div “logo” 一个 100px 的宽度/高度，看看它改变了 div “nav” 的大小。图像应重新调整到与 div“名称”相同的高度。如果 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>

【问题讨论】：

标签： html css web

【解决方案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/图像相对于 div“名称”的大小进行缩放，而不是相反。

那么您应该为您的尺寸使用相对值，例如% 或ems，但这不会改变resize、see fiddle 上的图像尺寸，就像#name 不会改变@ 987654333@resize。

【讨论】：