Question

我有一个宽度为20％的li元素;高度取决于视口。在小屏幕上我想要更高的高度。在里面，我有一个响应的图像。问题是，当我减小li元素的高度时，图像不会收缩。我想一起调整宽度和高度。 CodePen：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

实际上，您可以使用另一种方法来缩放图像而不会丢失宽高比，方法是设置printf的背景以使用图像，然后适应“响应性”＆＃39;使用li和background-position:center center：

Demo Fiddle

＆＃13;

background-size:cover

＆＃13;

*,
*: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;
}

＆＃13;

Answer 2

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

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

img {
  max-width:100%;
}

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

2 个答案:

Demo Fiddle