html - 使图像大小相同

Question

我想在页面上制作圆形图像，但我希望它们大小相同并尽量保持纵横比。 因为它们的大小不同，所以看起来很糟糕。我想让它们看起来像黄色小人的图像。

.person {
  border: 10px solid transparent;
  margin-bottom: 25px;
  width: auto;
  height: 200px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.7;
  border-radius: 50%;
}

.person:hover {
  opacity: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container text-center">
  <div class="row">
    <div class="col-sm-4">
      <p><strong>Counter-Strike</strong></p>
      <br />
      <a href="">
        <img class="person" src="http://i.imgur.com/Zckhfao.jpg" />
      </a>
    </div>
    <div class="col-sm-4">
      <p><strong>Rainbow 6: Siege</strong></p>
      <br />
      <img class="img-circle person" src="http://i.imgur.com/Dho2UVH.png" />
    </div>
    <div class="col-sm-4">
      <p><strong>FIFA</strong></p>
      <br />
      <img class="person" src="http://i.imgur.com/Dho2UVH.png" />
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <p><strong>League of Legends</strong></p>
      <br />
      <img class="person" src="http://i.imgur.com/Dho2UVH.png" />
    </div>
    <div class="col-sm-4">
      <p><strong>Racing</strong></p>
      <br />
      <img class="person" src="http://i.imgur.com/Dho2UVH.png" />
    </div>
    <div class="col-sm-4">
      <p><strong>Battlefield</strong></p>
      <br />
      <img class="person" src="http://i.imgur.com/bFg40Dj.jpg" />
    </div>
  </div>
</div>

Answer 1

您可能需要将 height:auto 和 max-width: 100%; 应用到您的 img

.person {
  border: 10px solid transparent;
  margin-bottom: 25px;
  width: auto;
  height: 200px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.7;
  border-radius: 50%;
}

.person:hover {
  opacity: 1;
}

.myrow img{
	height:auto;
	max-width: 100%;
}

 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container text-center">
  <div class="row myrow">
    <div class="col-sm-4">
      <p><strong>Counter-Strike</strong></p><br />
      <a href=@Url.Action( "PC", "Gaming")>
        <img class="person" src="https://baconmockup.com/300/200/" />
      </a>
    </div>
    <div class="col-sm-4">
      <p><strong>Rainbow 6: Siege</strong></p><br />
      <img class="img-circle person" src="https://baconmockup.com/300/200/" />
    </div>
    <div class="col-sm-4">
      <p><strong>FIFA</strong></p><br />
      <img class="person" src="https://baconmockup.com/300/200/" />
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <p><strong>League of Legends</strong></p><br />
      <img class="person" src="https://i.ytimg.com/vi/zrwRmR6MKeg/maxresdefault.jpg" />
    </div>
    <div class="col-sm-4">
      <p><strong>Racing</strong></p><br />
      <img class="person" src="https://i.ytimg.com/vi/zrwRmR6MKeg/maxresdefault.jpg" />
    </div>
    <div class="col-sm-4">
      <p><strong>Battlefield</strong></p><br />
      <img class="person" src="https://i.ytimg.com/vi/zrwRmR6MKeg/maxresdefault.jpg" />
    </div>
  </div>
</div>