1

我想将几张图像水平堆叠并让它们自动调整大小而不是分成两行。在示例中，我希望两个图像一起适合 400 像素。我已经设法用一张桌子做到了这一点，但它在 Firefox 中效果不佳，所以现在我正试图以正确的方式做到这一点。使用 height:auto;max-width: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>

4

3 回答 3

1

这应该是您要实现的目标：

演示

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

img {
    height:auto;
    width:50%; /* specify 50% for 2 images, 33.33% for three images 25% for 4 images... */
    float:left;
}
于 2014-05-23T15:11:41.163 回答
0

要每行显示两个图像，请将您的 CSS 更新为max-width: 50%. max-width:49%如果 50% 还是不行你也可以试试

于 2014-05-23T15:10:52.857 回答
0

尝试使用最大宽度：200px；通过说 max-width:100%;您暗示允许图像扩展到容器宽度的 100%

于 2014-05-23T15:11:55.383 回答