CSS图像裁剪大小

debugcn 发表于 Dev

有人知道

我试图使我的图片库。但是我有一个问题。当图像的尺寸不同时，图像可能不会很漂亮。所以我需要添加图片大小调整。照片的尺寸宽度：800px高度：400px另一张照片的尺寸600px 1024px。我想以div宽度：198px高度：198px看到我的图片大小。如果宽度198px高度的100％尺寸差异很大。

无论上传的照片大小如何，我都想像Facebook。没有图像尺寸的图片宽度：198px高度：198px。这是我的演示：CodePen

HTML：

<div class="profile_cover_container">
  <div class="cover_container">
    <div class="cover_img">
      <a href="#"><div class="img_200px200px"><img src="https://scontent-b-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/1780641_780166082011699_1924260798_n.jpg" width="198" height="198" padding="0"></a></div>
      <a href="#"><div class="img_200px200px"><img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t31.0-8/964870_679724332055875_989825665_o.jpg" width="198" height="auto" padding="0"></a></div>


      </div>
  </div>


</div>

CSS：

.profile_cover_container{
  position:relative;
  width:851px;
  height:400px;
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  border:1px solid #d8dbdf;

  -webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
  margin-top:3px;
}
.cover_container {
  width:851px;
  height:400px;
  float:left; 
}
.cover_img {
  float:left;
  width:200px;
  height:400px; 
  background-color:#000;
}
.img_200px200px {
  float:left;
  width:198px;
  height:198px;
  margin:1px;
  overflow: hidden;
}

.img_200px200px img {

   width: 100%;

}

皮特

我不认为您可以使用纯CSS来做您想做的事情，因为您需要进行计算以查看图像的高度是否小于宽度。用jQuery标记后，您可以添加以下CSS：

.img_200px200px img.height {
   width: auto;
   height:100%;
}

然后您可以在文档加载时使用此jQuery

$('.img_200px200px img').each(function() {
    var image = $(this),
        height = image.height(),
        width = image.width();

    if (width > height) {
        image.addClass('height');
    }
});

例子

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。