Question

任何人都知道如何解决这个问题：

示例的图像覆盖包含它的图像包装器。如果它更小或将“max-height：40vw”更改为“height：40vw”，它可以正常工作，但这两种解决方案对我都不好。

我正在尝试的是让图像以不同的分辨率（桌面到笔记本电脑，移动设备，我有不同的设计）响应，如下所示：http://goo.gl/yRo5OE（deviantart）

我正在尝试实施的网站：http://goo.gl/AAF4U7

谢谢，如果您有其他解决方案，请告诉我。

.image-wrapper {
  display:flex;
  justify-content:center;
  max-height:40vw;
  background:#141414;
}

.image-wrapper img {
  height:100%;
  width:auto;
}

<div class="image-wrapper">
  <img src="http://webbiter.com/project/tattoobiter.com/wp-content/uploads/2015/06/skull-with-rose.jpg">
</div>

Answer 1

只需从css

中删除height:100%即可

.image-wrapper {
  display:flex;
  justify-content:center;
  max-height:40vw;
  background:#141414;
}

.image-wrapper img {
  width:auto;
}

<div class="image-wrapper">
  <img src="http://webbiter.com/project/tattoobiter.com/wp-content/uploads/2015/06/skull-with-rose.jpg">
</div>

Answer 2

请查看以下内容是否有帮助 -

UIScrollView

或

http://jsbin.com/guwicolora/edit?output

高度问题：图像上的100％

2 个答案: