CSS3如何扩展具有高度的图像：自动几个像素

Question

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

我在一行中有 3 个响应式图像，每个在 col-md-4 中。它们的宽度为：100%，因此每个屏幕的高度都不同。
中间的一张图片的高度应该比其他图片高 20 像素，并从顶部边缘设置 -10 像素。

我认为在图像上添加填充会很容易，但实际上它不起作用。图像不使用填充进行缩放。
函数 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>

Answer 2

用overflow: hidden; 将您的图像包裹在.cropper 中，然后将它们放大一点。您还需要在包装器上使用display: inline-block，以便它永远不会扩展到超过“正常”图像宽度。如果不是这种情况，您可以在.col- div 上使用.cropper。

.cropper {
  overflow: hidden;
  display: inline-block;
}
.cropper img {
  transform: scale(1.04);
}
.slider-img {
  text-align: center;
}

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

显然，我误解了你的问题。 :)
我以为您想使用 CSS 去除边框，而不必编辑图像。
我的错。

嗯，你想要的也可以使用上面的技术来实现。我们只需要从.cropper 中删除overflow:hidden;。这是一个示例，我选择在悬停时逐渐放大图像。希望你喜欢。

.cropper {
  display: inline-block;
}

.cropper img {
  -webkit-transition: -webkit-transform 1s ease-out;
          transition: -webkit-transform 1s ease-out;
          transition:         transform 1s ease-out;
          transition:         transform 1s ease-out, 
                      -webkit-transform 1s ease-out;
}
.cropper img:hover {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}
.slider-img {
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row" style="margin-top: 1.5rem;">
    <div class="col-xs-4 no-padding slider-img">
      <div class="cropper">
        <img src="http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg" class="img-responsive" alt="slide">
      </div>
    </div>
    <div class="col-xs-4 no-padding slider-img slider-img-middle">
      <div class="cropper">
        <img src="http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg" class="img-responsive" alt="slide">
      </div>
    </div>
    <div class="col-xs-4 no-padding slider-img">
      <div class="cropper">
        <img src="http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg" class="img-responsive" alt="slide">
      </div>
    </div>
  </div>
</div>

如果您不喜欢悬停效果，请删除
.cropper img {...} 和
.cropper img:hover{...} 规则并添加以下规则：

.slider-img-middle .cropper img {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

调整比例因子，直到您对大小感到满意为止。