css图像裁剪调整大小

Question

我尝试制作我的图片库。但我有一个问题。当图像的大小不同时，图像不能很漂亮。所以我需要添加调整大小的图片。例如：照片宽度的尺寸：800px高度：400px另一张照片的尺寸600px 1024px。我希望看到我的照片尺寸为div宽度：198px高度：198px。如果100％的宽度198px高度尺寸非常不同。

我想要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%;

}

Answer 1

我不认为你可以用纯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');
    }
});

Example

Answer 2

Mustafa，我很难理解你真正需要的东西，但我明白你的英语不是很好。没关系。让我试一试。我想这就是你要找的东西。如果没有，请告诉我，我将删除或修改答案。

如果你想以198px的速度显示你所有的照片，但你不想让高度扭曲你的照片比例，只需将高度变为自动。

.img_200px200px {
    float:left;
    width:198px;
    height:auto;
    margin:1px;
    overflow: hidden;
 }

您可能还需要更新照片容器。

这是你需要的吗？

******编辑显示图像******

你说＆＃34;喜欢facebook＆＃34;。看看Facebook的图片布局。它们有一个限制最大宽度的容器，因此它不会超过470px。但高度是自动维持比例。如果为图像设置了定义的高度，则最终可能会拉伸或压缩它。

此外，您希望宽度为百分比而不是像素。这样，当您调整窗口大小时，它也可以通过浏览器缩小