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

问题

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

回答1:

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>

回答2:

Wrap your images in a .cropper with overflow: hidden; and scale them up a bit. You also need display: inline-block on the wrapper so it never expands to more than the "normal" image width. If it wasn't for this condition, you could have just used .cropper on the .col- div.

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

Apparently, I misunderstood your question. :)
I thought you wanted to get rid of the border using CSS, not having to edit the images.
My bad.

Well, what you want can also be achieved using the technique above. All we need is to remove overflow:hidden; from the .cropper. Here's an example, where I chose to gradually enlarge the images on hover. I hope you like it.

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

If you don't like the hover effect, remove the
.cropper img {...} and
.cropper img:hover{...} rules and add this one instead:

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

Play around with the scale factor until you are happy with the size.

来源：https://stackoverflow.com/questions/35973374/css3-how-to-expand-an-image-with-height-auto-for-a-few-pixels

标签

html

css

image

expand