CSS3如何用高度扩展图像：auto为几个像素 [英] CSS3 how to expand an image with height: auto for a few pixels

问题描述

我想知道如何使用纯CSS扩展一个高度为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.jpgclass =img-responsivealt =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.jpgclass =img-responsivealt =slide> 
 
< / div> 
< div class =col-xs-4 no-padding slider-img> 
< img src =http://www.vilna.nl/wp-content/uploads/2013/10/test.jpgclass =img-responsivealt =slide> 
< / div> 
< / div> 
< / div> 
  

CSS

  .slider-img img {
宽度：100％; 
} 
 
 .slider-img-middle img {
 margin-top：-10px; 
 padding：10px 0; 
} 
  

解决方案

我确实使用了方块大小技巧来达到此目的。

.slider-img img {width：100％;填充：10px; box-sizing：border-box;}。slider-img-middle img {margin-top：-10px;填充：10px 0; box-sizing：content-box;}

< link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css =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.jpgclass =img-responsivealt =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.jpgclass =img-responsivealt =slide> < / DIV> < div class =col-xs-4 no-padding slider-img> < img src =http://www.vilna.nl/wp-content/uploads/2013/10/test.jpgclass =img-responsivealt =slide> < / DIV> < / div>< / div>

I wonder how I can expand an image with height: auto for a few pixels, with pure CSS.

I have got 3 responsive images in row, each in col-md-4. They have width: 100%, so height is different on each screen.
The middle one image should have a bigger height than others by 20px and margined from top by -10px.

I thought that this will be easy with padding on image, but actually it doesn´t work. The image doesn´t scale with padding.
Function Calc() doesnt´t work on height: auto too, so I´m a bit in trouble now.

I would be happy for any help.
Thank you

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

解决方案

Here you are. I did use the box-sizing trick to achieve this.

.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为几个像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！