Как я центрирую и изменяю размер своего изображения в jumbotron? - PullRequest
Новая
       0

Как я центрирую и изменяю размер своего изображения в jumbotron?

0 голосов
/ 01 марта 2019

Я пытаюсь только центрировать мое изображение, но также изменить его размер, так как он становится большимЯ хочу, чтобы мое изображение располагалось прямо над навигацией, как и на аналогичных веб-сайтах.Как мне этого добиться? 

.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>

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

На самом деле не существует идеального решения для этого из-за размеров изображения, которое вы выбрали.Если вы растянете это изображение на 100% ширины и только высоту jumbotron, изображение будет сильно искажено.Предполагая, что вы не хотите, чтобы высота изображения растягивалась на весь экран, вы можете сделать что-то вроде этого: 

.jumbotron {
  background: url(https://images.unsplash.com/photo-1551308719-c0e80e6becc9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80);
  background-size: cover;
  background-position: center;
  min-height: 400px;
}

.navbar-nav.navbar-center {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  font-size: 20px;
}

.navbar-default {
  background-color: white;
  border-color: white;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" media="screen" href="./style.css">
</head>
<body>
<div class="jumbotron">
</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>
</body>
</html>
0 голосов
/ 01 марта 2019

Вы можете попробовать с этим CSS выровнять и изменить размер изображения с вашим jumbotron

.jumbotron img{
  width:100%;
  height: auto
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...