CSS3 如何将高度为 auto 的图像扩展几个像素

Question

我想知道如何使用纯 CSS 将高度为自动的图像扩展几个像素。

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

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

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

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

用 overflow: hidden; 将图像包裹在 .cropper 中，然后将它们放大一点。您还需要在包装器上使用 display: inline-block，这样它就不会扩展到超过 "normal" 图像宽度。如果不是这种情况，你可以在 .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);
}

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

Answer 2

给你。我确实使用了 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>

CSS3 如何将高度为 auto 的图像扩展几个像素

CSS3 how to expand an image with height: auto for a few pixels

html

css

image

expand