Question

我是网络开发的新手，请原谅我，如果这是一个非常幼稚的问题，但我面临一个问题，我有一排有7张图片，基本上是我公司的认证。它们都有不同的尺寸和颜色，看起来并不好看。我试图使它们看起来大小相同，反应灵敏。到目前为止我用过：

  clip: rect(0px,60px,200px,0px);

但这只会削减图像，所以我需要一些其他解决方案来解决这个问题我的第一张图片是250 * 100px，而另一张图片是250 * 250px，同样我有7张不同尺寸的图片，所以我设置了最大宽度：250px;高度：自动;这就是它现在的样子：

CSS：

.ribbon img{
        height:150px;
        margin: 2px 2px 2px 2px;
    }

.ribbon img:hover{
    border: solid 1px black;
    -moz-box-shadow: 0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc;
    box-shadow: 0 0 10px black;

    }
.ribbon{
    vertical-align:center;
    }

我想要得到的是那些第一张图像应该出现在中心我已经尝试过vertical-align：中间但是没有工作，而PCGS图像是全尺寸250 * 250所以这就是问题

Answer 1

您可以尝试img { height: 250px; }使所有img具有相同的高度，如果您保留width未设置，浏览器将处理宽度onscale

编辑1 -

如果您希望它们具有相同的宽度，则可以将height替换为设置所需值的width，请尝试此示例，https://jsfiddle.net/e7wv86pc/

img { width: 14%; }

Answer 2

您还可以将css属性background-size设置为cover，并使用css background-image属性设置图像，如下所示：

.image {
  width: 250px;
  height: 250px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; 
}

.i1 {
  background-image: url("http://ia.media-imdb.com/images/M/MV5BMjE4NDMwMzc4Ml5BMl5BanBnXkFtZTcwMDg4Nzg4Mg@@._V1_UY317_CR6,0,214,317_AL_.jpg");
}

.i2 {
  background-image: url("http://feelgrafix.com/data_images/out/20/932835-gerard-butler.jpg");
}

<div class="image i1"></div>
<div class="image i2"></div>

如何使所有图像看起来相同

2 个答案:

编辑1 -