Question

我需要有一个图像列表，我不知道图像的大小，有些可能是风景，有些可能是肖像。

景观应该适合100％宽度的父李，肖像应该适合100％的高度。

我可以开始工作的唯一方法是，如果图像是横向或纵向服务器端并添加相关类，则反过来会使宽度为100％或高度为100％。

有没有办法做到这一点，保持宽高比，而不使用对象适合或背景图像？

Answer 1

对图片使用max-height和max-width。您也可以将它们居中，这样小的图像就会很好看。

ul {
  margin: 0;
  padding: 20px;
  list-style: none;
  }
li {
  width: 100px;
  height: 100px;
  float: left;
  border: 1px dashed red;
  margin: 0 20px 20px 0;
  }
img {
  max-width: 100%;
  max-height: 100%;
  }

<ul>
  <li><img src="https://pixabay.com/static/uploads/photo/2015/02/08/20/57/man-629062_960_720.jpg" alt=""></li>
  <li><img src="https://pixabay.com/static/uploads/photo/2016/01/08/15/21/man-1128277_960_720.jpg" alt=""></li>
</ul>

Answer 2

如果我理解正确，这应该有用;

jsFiddle

<li class="container">
  <div class="landscape">

  </div>
</li>
<li class="container">
  <div class="portrait">

  </div>
</li>


.landscape {
  background-image:url("http://www.thelogofactory.com/wp-content/uploads/2015/09/fixed-google-logo-font.png");
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
}

.portrait {
  background-image:url("https://developers.google.com/safe-browsing/images/SafeBrowsing_Icon.png");
  width: 100%;
 height: 100%;
 background-size: contain;
 background-repeat: no-repeat;
}

.container {
 width: 100px;
 height: 100px;
}

您可以使用img标签代替div。

根据图像的方向将图像调整为完整高度或宽度？

2 个答案: