在 Bootstrap 4 中裁剪和居中图像以圈出答案

【问题标题】：Crop and center image to circle in Bootstrap 4在 Bootstrap 4 中裁剪和居中图像以圈出
【发布时间】：2018-02-15 10:34:04
【问题描述】：

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

我的代码：

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

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

【问题讨论】：

标签： html css twitter-bootstrap image geometry

【解决方案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 类以显示不透明度淡入并且在高图像重新定位期间没有抖动

纯 CSS 的高度等于宽度http://www.mademyday.de/css-height-equals-width-with-pure-css.html

保持纵横比 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>

【讨论】：

@DenisStephanov 请记住，当前的解决方案假定您有 $width > $height 的图像，如果您的 api 将有另一种类型的图像（方形、高和狭窄）。
是的，你说得对，所以它不能解决我的问题，来自 API 的图像具有可变尺寸，还有正方形：/
@DenisStephanov 好的，已更新。适用于所有情况。图像垂直/水平居中

【解决方案2】：

你只是想用css把一个正方形的图像变成一个圆形吗？你的问题有点令人困惑。使用.border-radius 可以使用 CSS 将其变成一个圆圈。

要使用的 CSS：

<style type="text/css">
  .rounded-circle {
    border-radius: 50%;
    min-width: 100%;
  }
</style>

然后你的 html 就是。

<div class="col-4">
    <img class="img-fluid rounded-circle" src="http://placehold.it/300x300" alt="">
</div>

【讨论】：

我从 API 接收图像，所以我必须使用矩形，而不是正方形。

【解决方案3】：

希望它可以帮助某人：如果您不需要它是<img>（无论如何，您的唯一目的是显示图像），您可以将<img> 替换为<div> 并将图像源设置为该@ 的背景图像987654324@.

这将为您提供更多选项来实现 OP 想要的，使用更少的代码（事实上，这是一个纯粹而简单的 CSS 问题）：

.cover-image {
  /* src image (replaced original since it's not available anymore) */
  background-image: url(https://dummyimage.com/1920x1080);
  
  background-size:cover;
  background-position: center;
  
  /* desired height */
  height: 80px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
    <div class="col-4">
      <div class="rounded-circle cover-image">&nbsp;</div>
    </div>
    <div class="col-8">Hello there!</div>
</div>

可以做更多的事情，因为调整<div> 的大小和位置相当容易，并且使用background-size: cover CSS 将始终保持背景上使用的图像的纵横比，同时调整它的大小以填充所有可用的最小调整大小（并裁剪其余部分）的空间。

【讨论】：