【发布时间】：2014-01-10 08:21:14
【问题描述】：
我有一个典型的“媒体块卖点”行，上面有图片，下面有文字。目前我正在使用 flexbox 来保持一切井井有条，但我最终会创建一个后备（可能是表格单元格或内联块）。这不是问题（事实上，flexbox 很棒）。
一个例子：http://drwoe.nl/
我的问题是：两张图片的宽度和高度相同。想象一下里面有插图人物的圆圈。第三幅图像有一个相同高度和宽度的圆圈，但插图字符“跳出”圆圈，使图像变大。
我已经对前两个图像进行了响应式处理，并且它们很好地调整了大小。为了让第三个按照设计师的要求进行渲染，我必须指定一个最小宽度（至少）以使其与圆圈的大小相匹配。这有意义吗？
如果我不必很好地调整这些图像的大小，这将不是问题。但我不知道如何保留第三张图片，它在技术上比两张图片大（由于“突破”插图）与它们一起调整大小。
我确实有设计的 PSD，并且可以取出我需要的部分。我尝试创建 CSS3 圆圈并将插图添加到伪元素中（绝对定位），但我无法让它们一起调整大小。
这是一个真正的脑筋急转弯还是我错过了一些简单的东西？非常感谢！
【问题讨论】：
-
如果有一些代码甚至更好的 js fiddle (jsfiddle.net) 来描述您的问题，那就太好了
-
对不起，chadocat。这是一个示例：codepen.io/matthewbivins/pen/Ckcme
-
所以，这是我提出的上述问题的临时解决方案：我根据最后一张图像的大小（即更大）。感觉有点脏，但至少可以。我仍然想知道是否有更好的方法！
标签： image css responsive-design image-scaling