html - CSS3如何扩展高度为: auto for a few pixels的图像

Question

我想知道如何使用纯 CSS 将具有 height: auto 的图像扩展几个像素。

我有 3 个连续的响应图像，每个图像都在 col-md-4 中。它们的宽度为:100%，因此每个屏幕上的高度都不同。
中间一张图片的高度应该比其他图片高 20px，并且与顶部的边距为 -10px。

我认为在图像上填充会很容易，但实际上它不起作用。图像不随填充缩放。
函数 Calc() 也不适用于 height: auto，所以我现在有点麻烦。

我很乐意提供任何帮助。
谢谢

https://jsfiddle.net/nbpjrztz/

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4 no-padding slider-img">
      <img src="http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg" class="img-responsive" alt="slide">
    </div>
    <div class="col-xs-4 no-padding slider-img slider-img-middle">
      <img src="http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg" class="img-responsive" alt="slide">

    </div>
    <div class="col-xs-4 no-padding slider-img">
      <img src="http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg" class="img-responsive" alt="slide">
    </div>
  </div>
</div>

CSS

.slider-img img {
  width: 100%;
}

.slider-img-middle img {
  margin-top: -10px;
  padding: 10px 0;
}

Answer 1

给你。我确实使用了 box-sizing 技巧来实现这一点。

.slider-img img {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.slider-img-middle img {
  margin-top: -10px;
  padding: 10px 0;
  box-sizing: content-box;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4 no-padding slider-img">
      <img src="http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg" class="img-responsive" alt="slide">
    </div>
    <div class="col-xs-4 no-padding slider-img slider-img-middle">
      <img src="http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg" class="img-responsive" alt="slide">

    </div>
    <div class="col-xs-4 no-padding slider-img">
      <img src="http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg" class="img-responsive" alt="slide">
    </div>
  </div>
</div>