css - 如何显示100px的图像

Question

我需要只显示100px的height图像,但它不能正常工作.我不想破坏图像.只需显示100px的图像.

.image-news
  {
    position: relative;
    width: 100%;
    height: 100px;
    margin: 0 auto;
  }
  
  .image-news img
  {
    width: 100%;
    height: 100px;
    cursor: pointer;
    background-size: cover;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap-grid.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-sm-12 col-md-6 no-padding">
              <div class="image-news">
                <img src="http://blog.emania.com.br/content/uploads/2015/12/paisagem-tropical-wallpaper-1.jpg"/>
              </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 no-padding content-news">
              <a href="#" target="_blank">
                <div class="title">
                  <span>Title</span>
                </div>
              </a>
              <div class="content">
                <span>Content</span>
              </div>
            </div>

Answer 1

您应该删除height的img,然后给overflow:hidden到.image-news

.image-news {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 0 auto;
  overflow: hidden;
}

.image-news img {
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap-grid.min.css" rel="stylesheet" />
<div class="col-xs-12 col-sm-12 col-md-6 no-padding">
  <div class="image-news">
    <img src="http://blog.emania.com.br/content/uploads/2015/12/paisagem-tropical-wallpaper-1.jpg" />
  </div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 no-padding content-news">
  <a href="#" target="_blank">
    <div class="title">
      <span>Title</span>
    </div>
  </a>
  <div class="content">
    <span>Content</span>
  </div>
</div>