CSS是一个固定宽度的图像，其中一个占据了空白

我正在拼命尝试使用CSS同时格式化两个图像。 我希望第一个是固定大小的，第二个占据剩余的宽度（但当它与第一个高度相同时，应该停止增长）。这是我的代码：

<span style="height:80px; width:100%">
    <img src="images/navicon.png" style="width:60px; height:60px; padding:10px 10px 10px 10px; "/>
    <img src="images/logo.png" style="max-height:60px; padding: 10px 10px 10px 10px;" />
</span>

但是当没有足够的空间时，不是第二张图像收缩（保持纵横比），而是线断开

---

谢谢你的帮助

这个可能的解决方案需要CSS，请参见下面的演示

div{
高度：100px；
溢出：隐藏；
字号：0；
}
跨度{
显示：内联块；
垂直对齐：顶部；
}
跨度：第n个孩子（2）{
宽度：计算（100%-100px）；
}
跨度：第n个儿童（2）img{
宽度：100%；
高度：自动；
}

HTML：

<div class="image-container">
    <div class="image"><img src="http://lorempixel.com/160/60/abstract/1"></div>
    <div class="image image-auto"><img src="http://lorempixel.com/100/60/abstract/1"></div>
</div>

<div class="image-container">
    <div class="image"><img src="http://lorempixel.com/60/60/abstract/1"></div>
    <div class="image image-auto"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
</div>

<div class="image-container">
    <div class="image"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
    <div class="image image-auto"><img src="http://lorempixel.com/1500/600/abstract/1"></div>
</div>

---

我更新了笔：

我不完全理解你的问题，但这就是我认为你的意思

注意：这是我对sdcr答案的更新版本

CSS:

HTML

参见JSFIDLE：

---

谢谢你的回答。我对我的问题进行了更精确的编辑：我不希望第二幅图像在像素化程度很高之前进行缩放，然后将其切掉。当它达到第一个高度时，它应该停止生长。谢谢你的回答。我对我的问题进行了更精确的编辑：我不希望第二幅图像在像素化程度很高之前进行缩放，然后将其切掉。当它达到第一个图像的高度时，它应该停止生长。因此，如果我理解正确的话，你希望你的第二个图像能够在不改变纵横比的情况下适应左右两侧的空间。如果它不能填满整个空间，这有关系吗？这就是您要寻找的，还是右侧的图像不应超过左侧图像的高度？我希望左侧的图像具有一定的固定大小（例如80px高度）。右边的那个可以尽可能宽，但不能高于第一个（80px）。长宽比应保持不变，任何东西都不应被切断。我不想用照片编辑器调整原始图片的大小，因为我在多个具有不同图像大小的CSS中使用它们。不幸的是，您的解决方案没有限制第二幅图像的高度。在正确的位置添加最大高度限制即可。如果找不到Flexbox更少、浏览器支持更多的解决方案，我将接受此解决方案；-）带

空白：nowrap这是可以避免的，但是由于您的所有输入，线条超过了100%：我可以像这样限制高度，但是第二幅图像的宽度太长了。或者我可以计算出剩余的宽度，比如，但是高度比实际值小得多。
.image-container {
    width: 100%;
    display: flex;
    align-items: flex-start;
}

.image {
    margin: 10px;
    padding: 0;
    flex-shrink: 0;
}

.image img {
    width: 100%;
    margin: 0;
    padding: 0;
    max-height: 80px; /*Line added to limit height*/
}

.image-auto {
    flex-shrink: 1;
    height: auto;
}

div {
    height: 80px;

    font-size: 0;
}
span {
    display: inline-block;
    vertical-align: top;
    padding:10px;
}
span:nth-child(1) img {
    max-height: 60px;

}
span:nth-child(2) img {
    width: 100%;

<div>
    <span><img src="http://lorempixel.com/100/100" /></span>
    <span><img src="http://lorempixel.com/output/people-q-c-924-67-9.jpg" /></span>
</div>