Блог

Как нам сделать так, чтобы изображение «помещалось» во второй столбец ниже? Это Bootstrap 4, и я хочу, чтобы правый столбец занимал ту же высоту, что и левый столбец, а затем изображение помещалось внутри него с сохранением соотношения сторон. Я также хочу, чтобы оно было центрировано по горизонтали и вертикали.

HTML в настоящее время выглядит следующим образом:

 <div class="form-row">
    <div class="col">
        <div class="form-group">
            <!-- Upload Image option -->
        </div>
        <div class="form-group">
            <!-- Image URL option -->
        </div>
    </div>

    <div class="col-md-4">
        <img src="leg.jpg" height="70px" />
    </div>
</div>
  

Я просто не хочу указывать этот height="70px" атрибут. Изображение должно расширяться / сжиматься, чтобы покрыть доступную высоту (определяется левой колонкой). Затем ширину изображения следует отрегулировать, чтобы сохранить соотношение сторон неизменным. Изображение, наконец, должно быть центрировано по горизонтали или вертикали.

Судя по скриншоту, здесь есть CSS из других классов и больше HTML-макета, чем предусмотрено. Вот следующие стили, относящиеся к img, с <figure> обернутым вокруг него.

 <figure class='figure'> <img class='figure-img fluid-img'...> </figure>

 img {
   object-fit:contain; 
   max-width:100%; 
   height:auto
 }
 .col {
   display:flex; 
   flex-flow:column nowrap; 
   justify-content: center;
   align-items:center
 }
  

 .form-row {
  max-width: 540px;
}

img {
  object-fit: contain;
  max-width: 100%;
  height: auto
}

.column {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center
}  

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<main class='container'>
  <section class="form-row">

    <section class="column col-8">
      <div class="form-group">

        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <div class="input-group-text">
              <input type="radio">
            </div>
          </div>
          <div class="custom-file">
            <input type="file" class="custom-file-input form-control">
            <label class="custom-file-label">Choose file</label>
          </div>
        </div>
      </div>

      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <div class="input-group-text">
            <input type="radio">
          </div>
        </div>
        <input type="url" class="custom-url-input form-control">

      </div>
    </section>

    <section class="column col-4">
      <figure class='figure'>
        <img src="https://oehawkseye.org/wp-content/uploads/2017/01/chicken-leg.png" class='figure-img img-fluid'>
      </figure>
    </section>

  </section>
</main>