css 在此裁剪中并排 float 图像

Question

我在 CSS 中有一个裁剪功能，可以在 css 中制作方形图像。它获取图像并创建一个正方形。 它做得很好。我的问题是，一张图片在另一张图片上方，我无法将它们并排 float 。有什么想法吗？

CSS

.ccontent {
  float:left !important;
  display:inline-block !important;
}

.c{
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.c img{
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.c img.portrait {
  width: auto;
  height: auto;
}

树的形象在海面上:

参见 FIDDLE

Answer 1

html:

<div class='c'>
  <img src='https://media-cdn.tripadvisor.com/media/photo-s/09/fa/82/57/img-20160107-wa0006-largejpg.jpg' alt='name1' class=portrait>
</div>

<div class='c'>
  <img src='https://upload.wikimedia.org/wikipedia/commons/2/2f/Grewia_tiliaefolia_tree_in_Chilkur,_Hyderabad_W_IMG_9418.jpg' alt='name1' class=portrait>
</div>

</div>

CSS:

.c{
 position: relative;
 float:left;
 width: 200px;
 height: 200px;
 overflow: hidden;
}
.c img{
 position: absolute;
 left: 50%;
 top: 50%;
 height: 100%;
 width: auto;
 -webkit-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
}
.c img.portrait {
 width: auto;
 height: auto;
}

https://jsfiddle.net/z0370m0o/