img-Fluid неправильно изменяет высоту изображения - PullRequest
Новая
       10

img-Fluid неправильно изменяет высоту изображения

0 голосов
/ 11 апреля 2019

Я работаю с Bootstrap 4 и пытаюсь создать сетку из 4 изображений: 2 сверху и 2 снизу. Я использую класс img-fluid, но размер изображения изменяется в зависимости от ширины, только делая высоту изображения слишком большой, и она обрезается. Я попытался установить max-height: 100%, но это не сработало.

Что не так? 

.images-container {
  height: 95vh;
}

.nav-button {
  width: 100%;
  height: 50%;
  margin: auto;
  font-size: 5em;
  color: black;
}

.footer-container {
  text-align: center;
}

.bottom-nav-box {
  font-size: 1.5em;
  margin: 0;
}

.sim-image {
  max-height: 100%;
}

i {
  margin: auto;
}

body {
  height: 100%;
}

html {
  height: 100%;
}

footer {
  height: 5vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-sm-10 h-100 center-container">
  <div class="row  images-container">
    <div class="row top-images-row h-50">
      <div class="w-50 d-inline-block image-div">
        <img src="https://lorempixel.com/875/656/" class="sim-image" id="simulatorImageTopLeft">
      </div>
      <div class="w-50 d-inline-block image-div" id="simulatorImageTopRight">
        <img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageTopRight">
      </div>
    </div>

    <div class="row bottom-images-row h-50">
      <div class="col image-div center-block text-center">
        <img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomLeft">
      </div>
      <div class="col image-div center-block text-center">
        <div class="row">
          <div class="col center-block text-center">
            <img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomRight">
          </div>
          <div class="col center-block text-center">
            <img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomRight">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 Ответ

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

Не уверен на 100%, что я правильно интерпретирую вопрос, но если вам нужна сетка изображений 2 × 2, вы должны просто сделать это относительно быстро, как это;

html: 

<div class="panel">
     <img src="blah" />
     <img src="blah" />
     <img src="blah" />
     <img src="blah" />
</div>

css: 

.panel {
     width = whateversizeyouwant;
     height = whateversizeyouwant;
     display: flex; 
     flex-wrap: wrap;    //the flex stuff should make it display 2×2
}

.panel > img {
     width: 50%;
     height: 50%;
}

Это должно работать для любого набора из 4 изображений.

Если вы хотите ихчтобы сохранить те же пропорции, чем при .panel > img установить height: auto.Имейте в виду, что это не даст вам идеальный квадрат, а размер panel будет влиять на размер изображений.

...