使图像高度相同并定义共享总宽度

Question

我在这里绞尽脑汁，试图弄清楚如何制作两个完全不同大小的图像共享相同的高度，并且总宽度为900px - 其中900px可能会发生变化。

想象一下，我有900px .container和两张随机大小的图片：

<main class="container">
  <div class="gallery">
    <img src="http://placehold.it/400x300" />
    <img src="http://placehold.it/500x200" />
</main>

我已经设置了CodePen over here。

我如何强制这些图像在900px .container内齐平，同时保持其纵横比，同时共享相同的高度？

任何有关此的帮助将不胜感激。提前谢谢！

Answer 1

只需创建一个类并使用您想要的宽度和高度设置样式。然后将类添加到图像和Eureka！ <img class="resize" src="XXXX" />

然后在css中定义它：

.resize { height:XXXpx; width:xxpx; }

如果这不起作用，您可以随时强制使用内联样式标记：

<img style="width:XXXpx;height:XXXpx;" src="XXXX" />

希望它有所帮助！