Question

我在CSS中有一个裁剪功能，用于在css中进行方形图像。它获取图像并创建一个正方形。它做得很好。我的问题是，一张图像在另一张图像上方，我无法将它们并排浮动。有什么想法吗？

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/

Answer 2

你需要分开思考。关于代码的奇怪之处在于它的结构。您只需要两件事：包装器（相对位置）和图像（绝对位置）。

.crop {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.crop img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.side-by-side { display: inline-block; }

<div class="crop side-by-side">
  <img src="http://placehold.it/300x300" /> 
</div>
<div class="crop side-by-side">
  <img src="http://placehold.it/340x340" /> 
</div>

现在有了这个，您可以轻松地将包装器视为您的块并将其显示为inline-block，或者根据需要将其置于绝对位置，但您有两个非常独立的单元可以在任何地方复制并始终共享相同的行为（裁剪图像）。此时，您基本上已经定义了一个用于裁剪图像的块 - 之后，只需将其视为CSS中的任何其他元素（只是不要调整其溢出并且不要给它static位置。 / p>

顺便说一句，我使用side-by-side类来说明你应该将裁剪行为与其他任何风格选择分开，这样你就可以轻松地将它们组合成一个工作元素而不用担心。

作为补充，我通常会采取一些措施来确保图像覆盖整个作物区域：

img { min-width: 100%; min-height:100 %; }

css在此作物中并排浮动图像

2 个答案: