CSS 一个固定宽度的图像和一个占用空白空间的图像答案

【问题标题】：CSS a fixed-width image and one taking up the empty spaceCSS 一个固定宽度的图像和一个占用空白空间的图像
【发布时间】：2015-07-04 07:44:34
【问题描述】：

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

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

感谢您的帮助！

【问题讨论】：

感谢您的所有输入，我快到了：我可以像that 一样限制高度，但是第二张图片的宽度太长了。或者我可以像that 那样计算剩余的宽度，但是高度却比它可能的要小得多。

标签： css layout aspect-ratio

【解决方案1】：

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

【讨论】：

感谢您的回答。我更准确地编辑了我的问题：我不希望第二张图像缩放，直到它非常像素化然后将其切断。它应该在达到第一个高度时停止生长。
所以，如果我理解正确，您希望您的第二张图像适合右侧左侧的空间，而不会更改纵横比。如果它不会填满整个空间，这有关系吗？
这是您要查找的内容，还是右侧的图像不应超过左侧图像的高度？
我希望左边的图像具有一定的固定尺寸（例如 80px 高度）。右边的可以尽可能宽，但不能高于第一个（80px）。应保留纵横比，不应切断任何内容。我不想使用照片编辑器调整原始图片的大小，因为我在具有不同图像大小的多个 CSS 中使用它们。不幸的是，您的解决方案不限制第二张图片的高度。
在正确的位置添加最大高度限制就可以了。 http://jsfiddle.net/Low7k16d/12/。如果我找不到任何具有更少 Flexbox 和更多浏览器支持的解决方案，我将接受此解决方案 ;-)

【解决方案2】：

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

注意：这是我对 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/

【讨论】：

使用white-space: nowrap;可以防止这种情况，但是行长超过100%

【解决方案3】：

这个可能的解决方案需要 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/

【讨论】：

感谢您的回答。我更准确地编辑了我的问题：我不希望第二张图像缩放，直到它非常像素化然后将其切断。它应该在达到第一个高度时停止生长。