Почему минимальная высота действует как максимальная высота? - PullRequest
Новая
       6

Почему минимальная высота действует как максимальная высота?

0 голосов
/ 05 октября 2018

На моей странице я хочу иметь раздел героя с изображением (рисунок), и я хочу, чтобы он имел ту же ширину (100% страницы), но регулируемую высоту (так как я изменяю размер своего окна).

Но по какой-то причине высота моего изображения достигает максимума 400 пикселей (что также является минимальной высотой), что приводит к растянутому изображению, например:

enter image description here

Вот мой код (использует Булму): 

.hero {
  background: url("https://cdn-images-1.medium.com/max/1600/1*XI3beonBnOwp-y5BwNOqCw.gif");
  background-size: 100% 100%;
  background-repeat: no-repeat; 
  min-height:400px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet"/>
<body class="has-navbar-fixed-top">
  <nav class="navbar is-info is-fixed-top">
    <div class="container has-text-centered">
      <div class="navbar-brand" style="flex-grow: 1; justify-content: center;">
        <a class="navbar-item" href="https://bulma.io" >
        <img src="https://vignette.wikia.nocookie.net/narutofanon/images/c/cc/Fdl-logo.svg/revision/latest?cb=20130812063152">
        </a>
      </div>
    </div>
  </nav>
  <section class="hero is-large has-text-centered">
  </section>
</body>

Вот JSFIDDLE: https://jsfiddle.net/8xjtknaf/2/

Есть ли способ, я могу избежать установки значения минимальной высоты, потому что он просто чувствуетHacky.Есть ли правильный способ для моего кода определить размер моего изображения и масштабировать его соответственно?

1 Ответ

0 голосов
/ 06 октября 2018

После того как вы проверили комментарий @ xRdev_38, вы можете разместить изображение на текущем экране без полосы прокрутки.

.hero1 {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.hero1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet"/>
  <body>
    <nav class="navbar is-info is-fixed-top">
        <div class="container has-text-centered">
          <div class="navbar-brand" style="flex-grow: 1; justify-content: center;">
            <a class="navbar-item" href="https://bulma.io" >
            <img src="https://vignette.wikia.nocookie.net/narutofanon/images/c/cc/Fdl-logo.svg/revision/latest?cb=20130812063152">
            </a>
          </div>
        </div>
    </nav>
    <section class="hero1">
        <img src="https://cdn-images-1.medium.com/max/1600/1*XI3beonBnOwp-y5BwNOqCw.gif" alt="">
    </section>
  </body>

Проверьте object-fit и overflow в CSS.object-fit: cover обеспечивает ваш img для идеального размещения на экране.И overflow: hidden удаляет края img, которые находятся за пределами экрана.

И лично я не рекомендую использовать background-image, если только вам это действительно не нужно.Будет трудно дать значения, как в этом случае.

Кроме того, эта статья поможет вам понять единицы измерения длины CSS.

...