Question

我只想显示图像的一定百分比（例如，上半部分），但是以响应方式显示，以便调整视口大小不会影响图像的哪个部分显示。

我发现的唯一解决方案依赖于使用固定高度的图像（例如，200px）而不是％年龄，但这没有响应。缩小视口时，会显示越来越多的图像，直到最终看到整个图像。

注意：我的JSFiddle示例使用引导类img-responsive，它添加了以下CSS属性：

display: block
max-width: 100%;
height: auto

您还可以抓住JSFiddle中的中间分隔/手柄并移动它以查看对图像的效果。

可以做些什么来满足我的要求？甚至可以在没有JavaScript和浏览器支持的情况下使用IE9吗？

Answer 1

除了position：absolute。

之外，您还可以使用伪元素：after

div:after {
  content: "";
  position: absolute;
  height: 50%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #ffffff
}

小提琴：https://jsfiddle.net/qse2LL4b/3/

Answer 2

也许就像这样

body {
  background: gray;
}
div {
  display: inline-block;
  overflow: hidden;
}
div img {
  position: relative;
  margin-top: -50%;
  transform: translateY(50%);
}

<div>
  <img class="img-responsive" src="http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png" class="img-responsive" />
</div>

Answer 3

在这里，我一起为你抛出：https://jsfiddle.net/qse2LL4b/4/

wantarray

它需要您的图像来源并裁剪它并替换它。您可以将im-responsive类添加到＆＃34; canvas＆＃34;如果你愿意，可以在函数中使用元素。

CSS - 仅显示响应图像的百分比

3 个答案: