Question

我想将图像放在图中所示的div中。一个应该对齐到左上角，一个对齐到中心，一个对齐到右下角。宽度和间隙也需要根据窗口大小调整大小。实现这一目标的最佳方法是什么？

Answer 1

只需使用位置样式，这样就可以了。

<style type="text/css">
  div {
    width: 100%;
    height: 200px;
    position: relative;
  }
  #img1 {
    position: absolute;
    top: 0;
    left: 0;
  }
  #img2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  #img3 {
    position: absolute;
    bottom: 0;
    right: 0;
  }
</style>

<div>
  <img id ="img1" src="http://lorempixel.com/200/100/">
  <img id ="img2" src="http://lorempixel.com/200/100/">
  <img id ="img3" src="http://lorempixel.com/200/100/">
</div>

Answer 2

您应该position: absolute所有与视口相关的图像。

这就是你要找的东西：

html {
  height: 100%;
}
body {
  height: 100%;
  width: 100%;
  position: relative;
}
img {
  width: 40px;
}
.first {
  position: absolute;
  top: 0;
  left: 0;
}
.second {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
.third {
  position: absolute;
  bottom: 0;
  right: 0;
}

<body>
  <img class="first" src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />
  <img class="second" src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />
  <img class="third" src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />

</body>

Answer 3

我会推荐一种不同的方法...... Flexbox！它更容易，但它是一个较新的CSS功能。

Flexbox的CSS-Tricks指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CanIUse的Flexbox支持表：http://caniuse.com/#search=flex

现在，这个解决方案似乎在Firefox和Chrome中的CodePen（http://codepen.io/VAggrippino/pen/rWXjbY）上运行得很好，但由于某种原因，它在＆＃34;运行代码段＆＃34;窗口在这里SO。希望这只是一个问题。

更新：它仅适用于CodePen。大多数这些游乐场（CodePen除外）在我的代码之后将代码注入到文档中。 img:last-child没有匹配任何内容，因为身体的最后一个孩子是<script>阻止。无论如何，以这种方式将body元素用作容器可能是不好的做法。现在已经修复了，应该可以在任何地方使用。

＆＃13;

html, body {
  height: 100%;
}

body {
  margin: 0;
}

.container {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

img {
  max-width: 33%;
  max-height: 33%;
}

img:first-child {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

img:last-child {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

＆＃13;

<div class="container">
  <img alt="cat1" src="http://lorempixel.com/200/200/cats/1">
<img alt="cat1" src="http://lorempixel.com/200/200/cats/2">
<img alt="cat1" src="http://lorempixel.com/200/200/cats/3">
  </div>

＆＃13;

Answer 4

对于想使用 Bootstrap 4 的用户可以执行以下操作：

align-self-*：控制指定弹性项目的垂直对齐方式。
img-fluid：使图像具有响应性。

.row {
  height: 30rem;
  border: .1rem red solid;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col align-self-start">
      <img class="img-fluid" src="http://placehold.it/200x250/ff9999&text=img1">
    </div>
    <div class="col align-self-center">
      <img class="img-fluid" src="http://placehold.it/200x250/ffb3b3&text=img2">
    </div>
    <div class="col align-self-end">
      <img class="img-fluid" src="http://placehold.it/200x250/ffcccc&text=img3">
    </div>
  </div>
</div>

对齐图像左上角，中间角，右下角

4 个答案: