使图像大小相同

Question

我试图在页面上制作圆形图像，但我希望它们的大小相同，并尝试保持宽高比。 由于尺寸不同，看起来很糟糕。我想让它们看起来像黄色图像。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可能需要向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>

git ls-files -z | xargs -0 -I{} -n1 sh -c "git log --reverse --format='%cN' '{}' | head -n1 | xargs -I[] echo '[];{}'" | grep -E "^your name;"

Answer 2

如果要将图像保留在img标记中，可以使用object-fit属性强制图像适应其容器。您可能还需要使用polyfill来支持浏览器，我建议使用lazysizes plugin。

您还可以使用background-image定义图像（直接在style属性中设置，以便可以从视图中进行管理...）并使用支持度更高的background-size属性。一些lazyload插件（例如，请参阅http://jquery.eisbehr.de/lazy/example_load-background-images）为此方法提供了data-src属性。

在这两种情况下，如您所建议，cover值似乎与object-fit或background-size一起使用的正确值。

Answer 3

您可以为图片添加max-width: 100%和max-height: 200px以保留宽高比，但不要超过200px或height。演示：

.person {
  border: 10px solid transparent;
  margin-bottom: 25px;
  max-width: 100%;
  max-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 list">
  <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>