Question

我想知道如何使用高度扩展图像：使用纯CSS自动渲染几个像素。

我有3个响应式图像，每个都在col-md-4中。它们的宽度为100％，因此每个屏幕的高度都不同中间的一个图像应该比其他图像的高度高20px，并且从顶部开始的边距为-10px。

我认为在图像上使用填充会很容易，但实际上它不起作用。图像不会随填充而缩放函数Calc（）在高度上不起作用：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

使用.cropper将图片包裹在overflow: hidden;中并稍微缩放一下。您还需要包装器上的display: inline-block，因此它永远不会扩展到超过＆＃34; normal＆＃34;图像宽度。如果不是这种情况，您可以在.cropper div上使用.col-。

＆＃13;
＆＃13;
.cropper { overflow: hidden; display: inline-block; } .cropper img { transform: scale(1.04); } .slider-img { text-align: center; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

＆＃13;
＆＃13;
.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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

如果您不喜欢悬停效果，请移除
.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技巧来实现这一目标。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

CSS3如何使用height扩展图像：自动为几个像素

2 个答案: