是否可以将响应式图像技术技术用于高度和宽度？

Question

我有一个宽度为 20% 的 li 元素；高度取决于视口。在小屏幕上我想要更大的高度。在里面我有一个响应的图像。问题是当我降低 li 元素的高度时，图像不会缩小。我想一起调整宽度和高度。代码笔：http://codepen.io/anon/pen/QbbOrb

 *, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  list-style:none;
  margin:0;
  padding:0;
}

li {
  width:20%;
  height:100px;
  display: inline-block;
  background: lightblue;
  padding: 15px;
}

img {
  max-width:100%;
  height:auto;
  display:block;
}

HTML

<ul>
  <li><div><img src="http://lorempixel.com/1450/600/"></div></li>
</ul>

Answer 1

实际上，您可以使用另一种方法来缩放图像而不会丢失纵横比，方法是将li 的背景设置为使用图像，然后通过使用background-position:center center 和background-size:cover 来适应“响应性”：

Demo Fiddle

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  width: 20%;
  height: 100px;
  display: inline-block;
  border: 15px solid lightblue;
  background-size: cover;
  background-position: center center;
}

<ul>
  <li style="background-image:url(http://lorempixel.com/1450/600/);"></li>
</ul>

Answer 2

如果你这样做，它会按照你想要的方式工作。

li {
  width:20%;
  display: inline-block;
  background: green;
  padding: 15px;
}

img {
  max-width:100%;
}