html - 在 Bootstrap 4 中裁剪和居中图像以圈出

Question

你能帮我把矩形图像裁剪成圆形，裁剪到中心吗？我需要将裁剪图像的宽度调整为列宽。

我的代码:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
    <div class="col-4">
      <img class="img-fluid rounded-circle" src="http://wallpaper.pickywallpapers.com/1920x1080/mark-wahlberg-front-profile.jpg" alt="">
    </div>

    <div class="col-8">Hello there!</div>
</div>

我的解决方案不起作用，并且是用我的图像椭圆制作的。感谢您的帮助。

Answer 1

这是通过伪元素填充设置的 1x1 纵横比的解决方案，计算基于父元素的宽度。您可以在下面找到详细的文章

JS用于计算图片宽高比。

if width/height == 1 - image is square
if width/height > 1 - image is wide
if width/height < 1 - image is narrow

在计算之后，如果需要应用 tallAndNarrow 类并为所有图像添加 loaded 类以显示不透明度淡入并且在高图像重新定位期间没有抖动

Height equals width with pure CSS http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Maintain Aspect Ratio SASS Mixin https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/

function fixAspect(img) {
  var $img = $(img),
    width = $img.width(),
    height = $img.height(),
    tallAndNarrow = width / height < 1;
  if (tallAndNarrow) {
    $img.addClass('tallAndNarrow');
  }
  $img.addClass('loaded');
}

.circle {
  width: 100%;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
}

.circle:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 100%;
}

.circle>img {
  position: absolute;
  height: 100%;
  left: 50%;
  transform: translateX( -50%);
  top: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  opacity: 0;
  transition: opacity .4s;
}

.circle>img.tallAndNarrow {
  width: 100%;
  top: 50%;
  transform: translateX(0) translateY( -50%);
  left: 0;
  height: auto;
}

.circle>img.loaded {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-4">
  <div class='circle'>
    <img src="http://wallpaper.pickywallpapers.com/1920x1080/mark-wahlberg-front-profile.jpg" alt="" onload='fixAspect(this);'>
  </div>

</div>
<div class="col-4">

  <div class='circle'>
    <img src="http://via.placeholder.com/150x350" alt="" onload='fixAspect(this);'>
  </div>
</div>

<div class="col-4">

  <div class='circle'>
    <img src="http://via.placeholder.com/150x150" alt="" onload='fixAspect(this);'>
  </div>
</div>