正方形图像，Bootstrap 4

Question

我有一个图片预览页面。所有图片大小不一，但预览应该是正方形的。

/* 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>

如何在不使用像素的情况下根据图像的宽度设置图像的高度？

Answer 1

.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;
});

正方形图像，Bootstrap 4

Square image, Bootstrap 4

css

image

bootstrap-4

image-resizing