Question

我正在尝试不仅使我的图像居中，而且自从将其缩放到较大尺寸后再进行调整。我希望自己的图片像其他类似网站一样位于导航上方。我该如何实现？

.jumbotron {
  text-align: center;
}

.navbar-nav.navbar-center {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  font-size: 20px;
}

.navbar-default {
  background-color: white;
  border-color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="jumbotron">
  <img src="https://images.unsplash.com/photo-1551308719-c0e80e6becc9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" width="200px">
</div>

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <ul class="nav navbar-nav navbar-center">
      <li><a href="#">HOME</a></li>
      <li><a href="#">COLECTION</a></li>
      <li><a href="#">SHOP</a></li>
      <li><a href="#">CONTACT US</a></li>
    </ul>
  </div>
</nav>

Answer 1

由于您选择的图像的尺寸，确实没有完美的解决方案。如果将此图像拉伸100％的宽度，而仅拉伸超长距放大器的高度，则图像将非常失真。假设您不希望图像高度延伸到整个屏幕，则可以执行以下操作：

STR_TO_DATE(CONCAT(date1, ' ', time1), '%d.%b.%Y %k:%i')

2019-03-01 11:30:00
2019-03-02 01:30:00
2019-03-03 00:30:00
2019-03-03 10:30:00

Answer 2

您可以尝试使用此 CSS 将图片与jumbotron对齐并调整大小

.jumbotron img{
  width:100%;
  height: auto
}

如何在超大屏幕上居中并调整图像大小？

2 个答案: