裁剪图像的最佳方式

Question

这个问题很简单也很常见。我有几个带有图像和文本的框，我希望它们都具有相同的大小，而不管图片尺寸如何，并且在响应时表现得很好。我怎样才能使它变得更好，我已经做到了？在我的本地机器上，javascript 正在运行，但由于我无法理解的原因，这里没有。 javascript 代码正在检查图片是否处于纵向模式并添加另一个类。谢谢。

$(document).ready( function() {

function getImgDim(pic) {
    var image = new Image(),
          dim = [];
    image.src = $(pic).attr("src");
    dim = [image.naturalWidth , image.naturalHeight];
    return dim;
  };
  
  function getContDim(pic) {
    return $(pic).parent().width();
  };
  
  function portrait (picture) {
    
    $(picture).each(function() {
      var dim = getImgDim(this);
      // console.log(dim);
      if( dim[0] < dim[1] || dim[0] < getContDim(this)) {
        $(this).parent().removeClass('u-center-landscape'); 
        $(this).parent().addClass('u-center-portrait');
      }
    });
  };
  
  portrait('.js-box');
  
});

* {
  box-sizing: border-box;
}

figure {
  margin: 0;
  padding: 0;
}

.boxes {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: content-box;
  text-align: center;
  padding-top: 40px; 
}
  .boxes:after, .boxes:before {
    display: table;
    content: "";
  }
  .boxes:after {
    clear: both; 
  }

  .boxes figure {
    float: left;
    width: 25%;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 30px; 
  }

  .boxes__content {
    cursor: pointer; 
  }

    .boxes__content:hover {
      -webkit-box-shadow: 0px 0px 20px 5px rgba(102, 102, 102, 0.25);
      -moz-box-shadow: 0px 0px 20px 5px rgba(102, 102, 102, 0.25);
      box-shadow: 0px 0px 20px 5px rgba(102, 102, 102, 0.25);
      border-radius: 10px; 
    }
      .boxes__content:hover .u-center-portrait img {
        width: 110%;
        transition: width 0.3s ease; 
      }

      .boxes__content:hover .u-center-landscape img {
        height: 110%;
        transition: height 0.3s ease;
      }

  .boxes figcaption {
    line-height: 60px; 
  }
  .boxes__title {
    font-size: 18px;
    color: #333; 
  }
  .boxes__img {
    height: 220px;
    overflow: hidden;
    border-radius: 10px 10px 0 0; 
  }

.u-center-landscape img {
  position: relative;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.u-center-portrait img {
  position: relative;
  top: 50%;
  left: 50%;
  height: auto;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="boxes">
        
        <figure>
          <div class="boxes__content">
            <div class="boxes__img u-center-landscape">
              <img class="js-box" src="http://lorempixel.com/700/500/" alt="">
            </div>
            <figcaption>
              <a href="javascript:void(0)" class="boxes__title">Mitteilungen</a>
            </figcaption>
          </div>
        </figure>
        <figure>
          <div class="boxes__content">
            <div class="boxes__img u-center-landscape">
              <img class="js-box" src="http://lorempixel.com/400/700/" alt="">
            </div>
            <figcaption>
              <a href="javascript:void(0)" class="boxes__title">Jobbörse</a>
            </figcaption>
          </div>
        </figure>
        <figure>
          <div class="boxes__content">
            <div class="boxes__img u-center-landscape">
              <img class="js-box" src="http://lorempixel.com/650/600/" alt="">
            </div>
            <figcaption>
              <a href="javascript:void(0)" class="boxes__title">Ferienjob</a>
            </figcaption>
          </div>
        </figure>
        <figure>
          <div class="boxes__content">
            <div class="boxes__img u-center-landscape">
              <img class="js-box" src="http://lorempixel.com/700/400/" alt="">
            </div>
            <figcaption>
              <a href="javascript:void(0)" class="boxes__title">Marktplatz</a>
            </figcaption>
          </div>
        </figure>
        <figure>
          <div class="boxes__content">
            <div class="boxes__img u-center-landscape">
              <img class="js-box" src="http://lorempixel.com/700/1200/" alt="">
            </div>
            <figcaption>
              <a href="javascript:void(0)" class="boxes__title">Veranstaltungen</a>
            </figcaption>
          </div>
        </figure>
        <figure>
          <div class="boxes__content">
            <div class="boxes__img u-center-landscape">
              <img class="js-box" src="http://lorempixel.com/600/600" alt="">
            </div>
            <figcaption>
              <a href="javascript:void(0)" class="boxes__title">Gruppen</a>
            </figcaption>
          </div>
        </figure>
        <figure>
          <div class="boxes__content">
            <div class="boxes__img u-center-landscape">
              <img class="js-box" src="http://lorempixel.com/1400/1920/" alt="">
            </div>
            <figcaption>
              <a href="javascript:void(0)" class="boxes__title">Benachrichtigungen</a>
            </figcaption>
          </div>
        </figure>
        <figure>
          <div class="boxes__content">
            <div class="boxes__img u-center-landscape">
              <img class="js-box" src="http://lorempixel.com/1200/500/" alt="">
            </div>
            <figcaption>
              <a href="javascript:void(0)" class="boxes__title">Mein Nachbarn</a>
            </figcaption>
          </div>
        </figure>
      </section> <!-- end boxes -->

谢谢。

Answer 1

不确定您对 HTML 有多少控制权，但您是否考虑过使用背景图片而不是 <img> 标签？然后，您可以在 CSS 中进行足够的控制来裁剪图像，而无需任何 JavaScript。示例：

.boxes__img {
  display: inline-block;
  width: 30%;
  height: 200px;
  
  background-size: cover;
  background-position: 50% 50%;
}

<div class="boxes__img" style="background-image: url('https://placehold.it/350x150');">
</div>
<div class="boxes__img" style="background-image: url('https://placehold.it/150x200');">
</div>
<div class="boxes__img" style="background-image: url('https://placehold.it/300x300');">
</div>

编辑：根据您在 cmets 中的要求，这是另一种技术。仍然只有 CSS，但使用 <img> 元素而不是背景图像。

.boxes__img {
  display: inline-block;
  width: 30%;
  height: 200px; 

  position: relative;
  overflow: hidden;
}

.boxes__img img {
  min-width: 100%;
  min-height: 100%;
  max-width: 300%;
  max-height: 300%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="boxes__img">
  <img src="https://placehold.it/350x150" />
</div>
<div class="boxes__img">
  <img src="https://placehold.it/150x200" />
</div>
<div class="boxes__img">
  <img src="https://placehold.it/1920x1200" />
</div>

Answer 2

您可以使用预定义的纵横比。

混音

@mixin aspect-ratio($width, $height) {
    position: relative;
    overflow: hidden;
    &:after {
        // Use padding to replace height 
        display: block;
        content: " ";
        width: 100%;
        padding-top: ($height / $width) * 100%;
    }
}

CSS

.avatar {
    @include aspect-ratio(1, 1); // alternatively use something like 16,9 or 4,3
    width: 100%;
    background-size: cover;
    background-position: 50% 50%;
}

HTML

<div class="avatar" style="background-image: url(image.jpg);"></div>

现场示例

http://codepen.io/jonnyme/pen/WoJVZy