Квадратное изображение, Bootstrap 4 - PullRequest
Новая
       22

Квадратное изображение, Bootstrap 4

0 голосов
/ 27 сентября 2019

У меня есть страница с предварительным просмотром изображений.Все изображения имеют разный размер, но предварительный просмотр должен быть квадратным. 

/* This is the CSS code which sets automatic height: */

.preview-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
<div class="row">
  <div class="col-md-4 col-sm-6 portfolio-item">
    <a class="portfolio-link" data-toggle="modal" href="#image1">
      <div class="portfolio-hover">
        <div class="portfolio-hover-content">
          <p class="text-white">Full size</p>
        </div>
      </div>
      <img class="img-fluid preview-img" src="img/01-thumbnail.jpg" alt="">
    </a>
    <div class="portfolio-caption">
      <h4>Image name</h4>
    </div>
  </div>
  <div class="col-md-4 col-sm-6 portfolio-item">
    <a class="portfolio-link" data-toggle="modal" href="#image2">
      <div class="portfolio-hover">
        <div class="portfolio-hover-content">
          <p class="text-white">Full size</p>
        </div>
      </div>
      <img class="img-fluid preview-img" src="img/02-thumbnail.jpg" alt="">
    </a>
    <div class="portfolio-caption">
      <h4>Image name</h4>
    </div>
  </div>
  <div class="col-md-4 col-sm-6 portfolio-item">
    <a class="portfolio-link" data-toggle="modal" href="#image3">
      <div class="portfolio-hover">
        <div class="portfolio-hover-content">
          <p class="text-white">Full size</p>
        </div>
      </div>
      <img class="img-fluid preview-img" src="img/03-thumbnail.jpg" alt="">
    </a>
    <div class="portfolio-caption">
      <h4>Image name</h4>
    </div>
  </div>
</div>

Как установить высоту изображения в соответствии с его шириной, без использования пикселей?

1 Ответ

0 голосов
/ 27 сентября 2019 
.preview-img {
  width: 100%;
  padding-bottom: 100%;
  height: 0;
  object-fit: cover;
}

Это должно работать во всех основных браузерах.

Если вы можете использовать javascript, 

window.addEventListener("resize", function(e) {
    var element = document.getElementsByClassName("preview-img");
    mapElement.style.height = mapElement.width;
});
...