Question

我希望像这样对角地将两张图像对准另一张图像，并且应该保持相应的图像。

到目前为止，我已经有了这个，但是当我重新调整窗口大小并且没有响应时，图像正在移动。是否可以使用bootstrap使其响应？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="row">
  <div class="col-md-8">
    <img class="img-responsive" align="left" src="img1.png" />
  </div>
</div>

<div class="row">
  <div class="col-md-8">
    <img class="img-responsive" align="left" src="img2.png" />
  </div>
</div>

JS Bin

Answer 1

使用col-*-offset-*代替左/右对齐。请查看下面的代码段以供参考。

.p0 {
  padding: 0 !important;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-6 p0">
        <img class="img-responsive" src="http://via.placeholder.com/600x400/green" />
      </div>
    </div>


    <div class="row">
      <div class="col-xs-6 col-xs-offset-6 p0">
        <img class="img-responsive" src="http://via.placeholder.com/600x400" />
      </div>
    </div>
  </div>
</body>

</html>

以对应的方式对角地布置两个彼此相对的图像

1 个答案: