Question

正如你们中的一些人可能知道允许用户上传图片可能很麻烦，特别是如果你必须用它们创建某种列表。

我一直在寻找网络，并且在您需要显示不同形状的图像列表的情况下，无法找到您所做的具体答案。因此我转向你。

说用户1 上传以下图片：

用户2 上传此图片：

正如您所看到的，这两个图像的高度和宽度都有很大不同。

现在假设您有10张不同尺寸的图像，并希望将它们显示在网格4 x 4中（为此我使用pointer-events来显示循环）

ng-repeat

如果你这样做，这将创建一个不均匀的列表！看起来很丑陋＆＃34;至少可以说。

所以我的问题是你做了什么？使用<div class="col-xs-4" ng-repeat="image in images"> <img alt="" ng-src="{{image}}"> </div>是否有任何技巧使其适合任何大小的图像，以便所有内容都对齐？

我希望我对问题的描述足够准确，为了演示，这里也是一个显示这个问题的小提琴。

简而言之，我如何确保它们的尺寸完全相同而不会使其中一张图像显得狭窄和/或扭曲个别图像？

fiddle

Answer 1

正如我的评论中提到的，一种选择是将所有图像裁剪成合适的格式，正方形可能是一个很好的折衷方案。您可以先将图像包装在容器中，然后将图像相对于容器放置，从而完成此操作。例如：

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

.image-container {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: relative;
  padding: 20px;
}

.image-container img {
  width: 100%;
  height: auto;
  position: absolute;
  margin: auto;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-12">
    <div class="col-xs-4">
      <div class="image-container"><img src="http://pngimg.com/upload/girls_PNG6448.png" width="100%" height="100%" class="image image-responsive"></div>
    </div>
    <div class="col-xs-4">
      <div class="image-container">

        <img class="image image-responsive" width="100%" height="100%" src="http://yeemei.mobile9.com/download/media/442/niceandsim_s8mhs1do.jpeg"></div>
    </div>

    <div class="col-xs-4">
      <div class="image-container">
        <img src="http://pngimg.com/upload/girls_PNG6448.png" width="100%" height="100%" class="image image-responsive"></div>
    </div>
    <div class="col-xs-4">
      <div class="image-container">
        <img class="image image-responsive" width="100%" height="100%" src="http://yeemei.mobile9.com/download/media/442/niceandsim_s8mhs1do.jpeg"></div>
    </div>
  </div>
</div>

＆＃13;

Fiddle

您还可以将图像放在容器中。例如，如果您想要居中，可以添加：

    top: -100%;
    bottom: -100%;
    left: -100%;
    right: -100%;

Answer 2

一种解决方案是根据您的首选比例为用户提供裁剪器，并允许他们选择要显示的图像部分。

另一种方法是将图像用作具有特定比率的div的背景，并希望它不显示不相关的区域。

这是针对第二种情况的解决方案（带有 - 只是为了笑 - 动画来显示整个图像）

http://jsfiddle.net/mrccf3sv/

.image{
  display:block;
  background: url('') 50% 0% no-repeat;
  background-size:cover;
  border:1px solid #ccc;
  animation:pan 10s linear infinite alternate;
  }
.image:before{
  content:'';
  display:block;
  padding-top:56.25%; /*ratio of 16:9*/
}

通过对每个断点使用不同的引导列计数来看它响应 http://jsfiddle.net/mrccf3sv/1

Answer 3

使用CSS扩展是非常糟糕的做法。我的意思是，我们有时必须这样做，但如果你可以扩展服务器端，那就更好了。试试PHP的想象力（如果有的话）。

HTML＆amp; CSS处理不同形状的图像

3 个答案: