javascript - 如何使所有图像看起来都一样

Question

我是网络开发的新手，如果这是一个非常幼稚的问题，请原谅我，但我面临一个问题，我有一行有 7 张图像，基本上是我公司拥有的认证。它们的尺寸和颜色都不一样，放在一起看起来不太好。我试图让它们看起来大小相同且 react 灵敏。到目前为止我用过:

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

但这只会剪切图像，所以我需要一些其他解决方案来解决这个问题我的第一张图片是 250*100px 而另一张是 250*250px 同样我有 7 张图片大小不同所以我设置了 max-width: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:middle 但不起作用，PCGS 图像是全尺寸 250*250 所以这是问题所在

Answer 1

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

编辑 1 -

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

img { 宽度:14%； }