Question

我正在拼命尝试使用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>

但是当没有足够的空间时，不是第二个图像缩小（保持纵横比），而是换行。

感谢您的帮助！

Answer 1

这个可能的解决方案需要CSS calc() ，请参阅下面的演示。

＆＃13;

div {
    height: 100px;
    overflow: hidden;
    font-size: 0;
}
span {
    display: inline-block;
    vertical-align: top;
}
span:nth-child(2) {
    width: calc(100% - 100px);
}
span:nth-child(2) img {
    width: 100%;
    height: auto;
}

＆＃13;

<div>
    <span><img src="http://lorempixel.com/100/100" /></span>
    <span><img src="http://lorempixel.com/100/100" /></span>
</div>

＆＃13;

JSFiddle： http://jsfiddle.net/Low7k16d/

Answer 2

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>

CSS：

.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;
}

我更新了笔：http://codepen.io/czoka/pen/XbJXVO

Answer 3

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

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

CSS：

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%;

HTML

<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>

见jsfiddle： http://jsfiddle.net/Low7k16d/4/

CSS是一个固定宽度的图像，一个占用空白空间

3 个答案: