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

Make Images Same Height and Define a Shared Total Width

本文关键字：共享 定义 图像 高度      更新时间：2023-09-26

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

想象一下，我有一个 900 像素的.container和两个随机大小的图像：

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

我在这里设置了一个代码笔。

如何强制这些图像齐平地适合 900px .container ，同时保持它们的纵横比，同时共享相同的高度？

任何这方面的帮助将不胜感激。提前感谢！

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

然后在 css 中定义它：

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

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

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

希望对您有所帮助！

相关文章：