首页 文章

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

提问于
浏览 次
0

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

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

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

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

html css css3

2 回答

  • -1

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

    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 .

    回复于
  • 0

    使用 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>
    回复于

相关问题