Question

之前我曾指出如何实现我想要的页面布局。然而，这与我的图像高度混淆。据我了解，height: auto;应在设置某个width时将高度设置为正确的比例。

这是我的代码：

.floatingImage {
        width: 50px;
        height: auto;
    }

#floatingImageContainer {
    background-color: red;
    width: 75%;
    height: 100%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

<body>
    <div id = "floatingImageContainer">
        <img src = "images\miniImages\1.jpg" class = "floatingImage"></img>
        <img src = "images\miniImages\2.jpg" class = "floatingImage"></img>
        <img src = "images\miniImages\3.jpg" class = "floatingImage"></img>
        <img src = "images\miniImages\4.jpg" class = "floatingImage"></img>
        <img src = "images\miniImages\5.jpg" class = "floatingImage"></img>
        <img src = "images\miniImages\6.jpg" class = "floatingImage"></img>
    </div>
</body>

我的猜测是它与display属性或flex-wrap属性有关，但这是我最后一个问题的解决方案，我并不完全确定然而它如何影响我的图像高度......避免在屏幕截图中添加了一个边距，但这不会改变高度。

这是该问题的屏幕截图： what the hell

提前谢谢！

新问题：

Answer 1

您需要将align-items与适当的设置添加到容器中，以使auto高度起作用，例如align-items: flex-start;。否则，默认情况下，项目将被拉伸到容器的整个高度：

html, body {
  margin: 0;
  height: 100%;
}

.floatingImage {
  width: 50px;
  height: auto;
}

#floatingImageContainer {
  background-color: red;
  width: 75%;
  height: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

<div id="floatingImageContainer">
  <img src="http://placehold.it/300x500" class="floatingImage">
  <img src="http://placehold.it/300x200" class="floatingImage">
  <img src="http://placehold.it/200x200" class="floatingImage">
  <img src="http://placehold.it/300x400" class="floatingImage">
  <img src="http://placehold.it/400x200" class="floatingImage">
  <img src="http://placehold.it/300x350" class="floatingImage">
</div>

BTW，如评论中所述：关闭</img>代码无效HTML - 将其删除......

Answer 2

使用

align-items：center

在容器上

以防止它拉伸它的孩子。

＆＃13;

.floatingImage {
  width: 50px;
  height: auto;
}

#floatingImageContainer {
  background-color: red;
  width: 75%;
  height: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

＆＃13;

<body>
  <div id="floatingImageContainer">
    <img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>
    <img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>
    <img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>
    <img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>
    <img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>
    <img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>
  </div>
</body>

＆＃13;

Answer 3

使用display: flex和display: block，而不是使用text-align: center水平对齐我想要的图像是你最后一个要解决的问题。这不会弄乱图像。

另外，我建议在实际<img>标记内设置图像宽度，在标记内设置width属性，没有高度将与使用CSS height: auto完全相同。我推荐这个，因为它可以帮助任意用户代理（即语音浏览器），并为它们传递正确的宽高比。这些通常无法读取CSS。此外，这允许浏览器甚至在加载CSS和图像资源之前调整图像的大小。不提供，图像标记中的width属性将导致浏览器将其呈现为0x0，直到浏览器可以调整大小。

这是一个有效的例子：

＆＃13;

#floatingImageContainer {
    background-color: red;
    width: 75%;
    height: 100%;
    display: block;
    text-align: center
}

＆＃13;

<body>
  <div id="floatingImageContainer">
    <img src="http://lorempixel.com/g/400/200/" class="floatingImage" width="50"/>
    <img src="http://lorempixel.com/g/400/200/" class="floatingImage" width="50"/>
    <img src="http://lorempixel.com/g/400/200/" class="floatingImage" width="50"/>
    <img src="http://lorempixel.com/g/400/200/" class="floatingImage" width="50"/>
    <img src="http://lorempixel.com/g/400/200/" class="floatingImage" width="50"/>
    <img src="http://lorempixel.com/g/400/200/" class="floatingImage" width="50"/>
  </div>
</body>

＆＃13;

CSS - 图像高度不会随宽度而缩放

3 个答案: