HTML和CSS处理不同形状的图像

由于你们中的一些人可能知道允许用户上传图像可能是一件麻烦事，尤其是如果你必须创建某种列表与他们。HTML和CSS处理不同形状的图像

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

说用户1上传下面的图片：

而且用户2个上传这个图片：

正如你可以看到这两个图像是非常高度和宽度都不相同。

现在让我们说，你有不同大小的10张图像，并希望在网格4×4显示它们（为此我使用ng-repeat显示一个循环）

<div class="col-xs-4" ng-repeat="image in images"> 
    <img alt="" ng-src="{{image}}"> 
</div>

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

所以我的问题是你是做什么的？是否有任何使用CSS的技巧使它适合任何尺寸的任何图像，以便一切都对齐？

我希望我的问题描述足够准确，以便演示，这里也是一个演示此问题的小提琴。

总之，我如何确保它们都是相同的大小，而不会使图像看起来局促和/或扭曲个别图像？

fiddle

来源

2016-12-18 Marc Rasmussen

如果他们是不同的长宽比，你想要均匀地显示他们，你将不得不...... a）裁剪他们 - 也许一个居中正方形最适合这个，或者b）把他们放在一个容器周围有空间。哪个选项更适合你？ – sol

这并不能解决裁剪的问题，但bootstrap有'clearfix'类来帮助解决这个问题。在每个第三个元素中添加一个clearfix元素将会打入一个新行：http://jsfiddle.net/jn6nnp3d/1/ – bitten

正如我在评论中提及，一个选择是裁剪所有图片到合适的格式，方可能是一个很好的妥协。您可以通过首先将图像包装在容器中，然后将图像与容器相关放置来完成此操作。例如：

/* 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; 
 
}

<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>

Fiddle

还可以在容器中定位图像。例如，如果你想中心，它可以添加：

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

来源

2016-12-18 21:50:44 sol

一种解决方案是提供了跟头的用户首选率，并允许他们选择来显示图像的一部分。

另一种方法是使用图像作为具有特定比例的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

来源

2016-12-18 21:51:00

使用CSS进行缩放是非常糟糕的做法。我的意思是，我们都必须这样做，但如果您可以扩展服务器端，那么最好做到这一点。如果可用的话，试试PHP的imagick。

来源

2016-12-18 22:27:35

HTML和CSS处理不同形状的图像

回答

相关问题