Question

我想放置几个水平堆叠的图像，让它们自动调整大小，而不是分成两行。在这个例子中，我希望两个图像都适合400px。我已经成功地使用了一个表，但它在firefox中运行得不是很好，所以现在我尝试以正确的方式进行操作。自动调整高度：自动;最大宽度：100％适用于一个图像。这是代码：

 <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
<title>test</title>
<style>

    img {
        height:auto;
        max-width:100%;
        display:inline;
        float:left;
    }
</style>
</head>
<body>
<div style="border:1px solid red; width:400px;height:300px">
     <img src="img/test.jpg" width="800" height="100"/>
      <img src="img/test2.jpg" width="300" height="100" />
</div>

Answer 1

这应该是你想要实现的目标：

<强> DEMO

我删除了所有为图像设置withs和height的内联样式并打破了布局并添加了 CSS：

img {
    height:auto;
    width:50%; /* specify 50% for 2 images, 33.33% for three images 25% for 4 images... */
    float:left;
}

Answer 2

要每行显示两张图片，请将CSS更新为max-width: 50%。如果50％的人仍然无法工作，您也可以尝试max-width:49%

Answer 3

尝试使用max-width：200px;通过说max-width：100％;你暗示图像可以扩展到容器的100％

如何使两个或多个图像自动调整大小而不超过边界框？

3 个答案: