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

我是网络开发新手，如果这是一个非常幼稚的问题，请原谅我，但我面临一个问题，我有一行有我公司拥有的7张图片。它们的大小和颜色都不一样，放在一起不好看。 我试着让它们看起来都一样大，反应灵敏。 到目前为止，我使用了：

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

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

CSS:

---

我想得到的是第一个图像应该在中间，我试过垂直对齐：中间，但不起作用，PCGS图像是全尺寸250*250，所以这是个问题

你可以尝试

img{height:250px；}

使所有img具有相同的高度，如果未设置

宽度，浏览器将处理缩放宽度

编辑1-
如果您希望它们具有相同的宽度，您可以将设置所需值的
高度
替换为
宽度
，请尝试此示例

img{width:14%；}
您可以尝试
img{height:250px；}
使所有img具有相同的高度，如果您未设置
width
，浏览器将处理缩放宽度

编辑1-
如果您希望它们具有相同的宽度，您可以将设置所需值的
高度
替换为
宽度
，请尝试此示例

img{width:14%；}
您也可以使用css属性
背景大小
设置为
封面
，并使用css
背景图像
属性设置图像，如下所示：


.image{
宽度：250px；
高度：250px；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
}
.i1{
背景图像：url（“http://ia.media-imdb.com/images/M/MV5BMjE4NDMwMzc4Ml5BMl5BanBnXkFtZTcwMDg4Nzg4Mg@@"第1版(第317版)(第6版),第0214317版(第1版)；
}
.i2{
背景图像：url（“http://feelgrafix.com/data_images/out/20/932835-gerard-butler.jpg");
}
您还可以使用css属性
背景大小
设置为
封面
，并使用css
背景图像
属性设置图像，如下所示：


.image{
宽度：250px；
高度：250px；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
}
.i1{
背景图像：url（“http://ia.media-imdb.com/images/M/MV5BMjE4NDMwMzc4Ml5BMl5BanBnXkFtZTcwMDg4Nzg4Mg@@"第1版(第317版)(第6版),第0214317版(第1版)；
}
.i2{
背景图像：url（“http://feelgrafix.com/data_images/out/20/932835-gerard-butler.jpg");
}

您想要实现什么目标？是否希望它们都具有相同的高度？对每个图像使用父div，将这些div设置为内联块。然后将父div内的图像设置为最大宽度：100%，最大高度：100%。然后设置垂直对齐：中间？@rahul！见下面更新的答案。这对你有用你想达到什么目标？是否希望它们都具有相同的高度？对每个图像使用父div，将这些div设置为内联块。然后将父div内的图像设置为最大宽度：100%，最大高度：100%。然后设置垂直对齐：中间？@rahul！见下面更新的答案。这对你很有用。我可能会进一步调整它，比如
。cert img{height:75px；display:inline block；vertical align:middle；}
只是为了确保所有的东西都排列得很好。我尝试过你的解决方案，但现在它将我的图像设置为随机宽度，并打破了pixels@Rahul.Valani嗨Rahul请看编辑1，如果我们有更多的信息那就太好了/requirement@ZayLau我试过这个，但它不能使我的图片进入中心，请查看我编辑的问题。@Rahul.Valani Hi Rahul，我可以知道你要哪一个吗？设置宽度/高度？您可能想试试我的方法，显示Edit 1I的示例，我可能会将其进一步调整为
.cert img{height:75px；display:inline block；vertical align:middle；}
只是为了确保一切都很好。我尝试了你的解决方案，但现在它将我的图像设置为随机宽度，并打破了pixels@Rahul.Valani嗨，拉胡尔，请看编辑1，如果我们有更多的信息，那将是伟大的/requirement@ZayLau我试过了，但它不能让我的图像居中，请看我编辑的问题。@Rahul.Valani Hi Rahul，我可以知道你要选哪一个吗？设置宽度/高度？你可能想试试我的，显示编辑1I的例子，我试过这个，它使我的250*100px的图像变成250*250，并打断像素，你说的打断像素是什么意思？它将根据目标大小调整图像大小，如果图像太小，它将调整图像大小以适应目标大小，如果图像太大，它也将调整图像大小以适应目标大小。这不是你想要的吗？我试过了，它把我的250*100px的图像变成了250*250，并打断像素，你说的打断像素是什么意思？它将根据目标大小调整图像大小，如果图像太小，它将调整图像大小以适应目标大小，如果图像太大，它也将调整图像大小以适应目标大小。这不是你想要的吗？
.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;
    }