CSS 一张固定宽度的图片和一张占据空白的图片 space

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>

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

感谢您的帮助！

Answer 1

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

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

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

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 一张固定宽度的图片和一张占据空白的图片 space

CSS a fixed-width image and one taking up the empty space

css

layout

aspect-ratio