Обеспечение одинакового размера адаптивного изображения и класса - PullRequest
Новая
       23

Обеспечение одинакового размера адаптивного изображения и класса

1 голос
/ 29 апреля 2019

Я пытаюсь сделать дизайн, который использует пробелы.

У меня есть изображение, которое я хочу на белом фоне.У меня есть класс с белым фоном и само изображение (которое также имеет белый фон как часть изображения).У меня проблема с тем, что я не могу гарантировать, что класс div имеет ту же высоту, что и само изображение, если у меня есть оба адаптивных ответа.

Я попытался добавить второе изображение с такой же высотой, какисходное изображение, которое представляет собой просто пробел, настройку div для реагирования, и кучу других вещей, но я не уверен, каким будет лучший способ сделать это.Сама страница находится на http://jamieaurora.com/devinTribute.html, чтобы понять, что я собираюсь сделать (хотя код немного устарел, чем то, что я публикую здесь).Если бы кто-нибудь мог указать мне правильное направление, это было бы очень ценно.Я вырезал фрагменты кода, которые мне не нужны, но если вы хотите взглянуть на полный HTML-файл, он находится в этом хэштегине.Большое вам спасибо!

https://hastebin.com/tifiqaciri.xml

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.responsive
{
  width: 100%;
  height: auto;
}
.hero-section
{
  background-color: white;
  font-family: Oswald;
  letter-spacing: 4px;
  top: 0;
  height: 64%;
  width: auto;
  padding-top: 5%;
  padding-bottom: 1%;
}
</style>
<body>
<nav>
<ul id='navbar' style="z-index:0;">
<li><a class = "active" href="index.html">Home</a></li>
</ul>
</nav>
<section class="hero-section" id="hero-section">
  <div class = "container-fluid">
    <div class = "row">
      <div class="col-xs-6">
        <img src = "images/devin-townsend-evermore.jpg" class="responsive" ></img>
      </div>
      <div class="col-xs-6">
        <h1 style="padding-left: 62%" class="responsive">Title Text</h1>
        <h2 style = "padding-left: 60%; font-size: 140%; align: left;" class="responsive">Paragraph Text</h2>
      </div>

      </div>

    </div>


  </section>
...