Question

我希望我的img始终保持相同大小，但也要使其看起来更好。（适合对象？）。我希望这些图片尺寸相同。

实际上，我的img具有width: 100%;，并且没有height属性css。

请在jsfiddle中检查我的代码。（评论）

Answer 1

使图像大小相同。将图片保留在div中，并在该div中提供一些宽度和高度。然后通过添加width：100％和height：100％的css属性，您的图片将始终与div大小相同。

   <style>
       .img-box{
          width:300px;
          height:300px;
        }
       .img-box img{
         width:100%
         height:100%;}
    </style>

    <div class="img-box">
        <img src="image.jpg">
    </div>

Answer 2

这是一种不会拉伸图像的解决方案。

* {
  box-sizing: border-box;
}

a {
  color: #d9400b;
  text-decoration: none;
  text-align: center;
}

.st--player-box {
  border: 1px solid #dadada;
  display: block;
  float: left;
  width: 31%;
  margin: 1% 0 1% 1.7%;
}

.st--player-box .st-player-img {
  display: block;
}

.st-player-img {
  /* just adjust the height and width */
  height: 300px;
  width: 100%;
  object-fit: scale-down;
  background: black;
}

.st--player-info {
  height: 55px;
}

<a href="http://strefatenisa2.crehler.com/zawodnicy/rafael-nadal/">
<div class="st--player-box">
<img class="st-player-img" src="https://media.strefatenisa.com.pl/media/image/74/45/ea/rafael-nadal.jpg" title="Rafael Nadal" alt="Rafael Nadal">
<div class="st--player-info">
<span class="st--player-name">Rafael Nadal</span>
</div>
</div>
</a>

<a href="http://strefatenisa2.crehler.com/zawodnicy/roger-federer/">
<div class="st--player-box">
<img class="st-player-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/motorcycle.jpg" title="Roger Federer" alt="Roger Federer">
<div class="st--player-info">
<span class="st--player-name">Roger Federer</span>
</div>
</div>
</a>

Answer 3

https://jsfiddle.net/z09xa8ph/2/

这是您编辑过的小提琴，添加了img标签周围的一个附加包装纸，您必须在框上至少设置一些高度值，我将其添加到.st--player-box类中，将其设置为31vh，使其保持一定的响应速度。当然，您可以在此处进行编辑以满足您的需求。

.st--image-box{
height: calc(100% - 55px);
width: 100%;
float: left;
}

此方法可能会出现的一个问题是，由于使用对象适配时，较大的图像可能会被切掉错误：覆盖，无法将对象位置设置为使图像居中，但是覆盖属性会保留图像宽高比取决于父级框的大小，因此所有框中的图像都将具有相同的大小，而不取决于其宽高比。

图片大小不一样（css）

3 个答案: