语法

Question

我有一个非常基本的示例，但是我无法创建看起来不错的图像行。

在我的示例中，图像看起来很拉伸。

有没有办法改善这一点？

.site {
  background: #000;
}

.partners img{
  width:100%;
  height:100px;
  background-size: cover;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="site">
  <div class="row d-flex">
    <div class="col-md-4 partners">
      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/48/FIS_%28company%29_Fidelity_National_Information_Services_Inc._Corporate_Logo.svg/640px-FIS_%28company%29_Fidelity_National_Information_Services_Inc._Corporate_Logo.svg.png" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://s3.amazonaws.com/freebiesupply/large/2x/ing-logo-png-transparent.png" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://www.careinternational.org.uk/linking-for-change/images/Barclays-Ross-Kingsland.png" />
    </div>
  </dpaiv>
  <div class="row d-flex">
    <div class="col-md-4 partners">
      <img src="https://cdn.images.express.co.uk/img/dynamic/1/590x/rbs-400775.jpg" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://www.sundaypost.com/wp-content/uploads/sites/13/2016/05/banks-900x540.jpg" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://www.leftovercurrency.com/wp-content/uploads/2016/11/the-royal-bank-of-scotland-plc-10-pounds-banknote-obverse-1.jpg" />
    </div>
  </div>
</div>

Answer 1

当您取消此选项时，图像会拉伸，您需要一侧费用的高度或宽度。

.site {
  background: #000;
}

.partners img{
  width:100%;
  height:auto;
  background-size: cover;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="site">
  <div class="row d-flex">
    <div class="col-md-4 partners">
      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/48/FIS_%28company%29_Fidelity_National_Information_Services_Inc._Corporate_Logo.svg/640px-FIS_%28company%29_Fidelity_National_Information_Services_Inc._Corporate_Logo.svg.png" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://s3.amazonaws.com/freebiesupply/large/2x/ing-logo-png-transparent.png" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://www.careinternational.org.uk/linking-for-change/images/Barclays-Ross-Kingsland.png" />
    </div>
  </dpaiv>
  <div class="row d-flex">
    <div class="col-md-4 partners">
      <img src="https://cdn.images.express.co.uk/img/dynamic/1/590x/rbs-400775.jpg" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://www.sundaypost.com/wp-content/uploads/sites/13/2016/05/banks-900x540.jpg" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://www.leftovercurrency.com/wp-content/uploads/2016/11/the-royal-bank-of-scotland-plc-10-pounds-banknote-obverse-1.jpg" />
    </div>
  </div>
</div>

查看更多详细信息How to make two images responsive with fixed height and plain CSS?

Answer 2

.site {
  background: #000;
}

.partners img{
  height:100px;
  background-size: cover;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="site">
  <div class="row d-flex">
    <div class="col-md-4 partners">
      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/48/FIS_%28company%29_Fidelity_National_Information_Services_Inc._Corporate_Logo.svg/640px-FIS_%28company%29_Fidelity_National_Information_Services_Inc._Corporate_Logo.svg.png" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://s3.amazonaws.com/freebiesupply/large/2x/ing-logo-png-transparent.png" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://www.careinternational.org.uk/linking-for-change/images/Barclays-Ross-Kingsland.png" />
    </div>
  </dpaiv>
  <div class="row d-flex">
    <div class="col-md-4 partners">
      <img src="https://cdn.images.express.co.uk/img/dynamic/1/590x/rbs-400775.jpg" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://www.sundaypost.com/wp-content/uploads/sites/13/2016/05/banks-900x540.jpg" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://www.leftovercurrency.com/wp-content/uploads/2016/11/the-royal-bank-of-scotland-plc-10-pounds-banknote-obverse-1.jpg" />
    </div>
  </div>
</div>

或

.site {
  background: #000;
}

.partners img{
  width:100px;
  background-size: cover;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="site">
  <div class="row d-flex">
    <div class="col-md-4 partners">
      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/48/FIS_%28company%29_Fidelity_National_Information_Services_Inc._Corporate_Logo.svg/640px-FIS_%28company%29_Fidelity_National_Information_Services_Inc._Corporate_Logo.svg.png" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://s3.amazonaws.com/freebiesupply/large/2x/ing-logo-png-transparent.png" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://www.careinternational.org.uk/linking-for-change/images/Barclays-Ross-Kingsland.png" />
    </div>
  </dpaiv>
  <div class="row d-flex">
    <div class="col-md-4 partners">
      <img src="https://cdn.images.express.co.uk/img/dynamic/1/590x/rbs-400775.jpg" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://www.sundaypost.com/wp-content/uploads/sites/13/2016/05/banks-900x540.jpg" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://www.leftovercurrency.com/wp-content/uploads/2016/11/the-royal-bank-of-scotland-plc-10-pounds-banknote-obverse-1.jpg" />
    </div>
  </div>
</div>

Answer 3

如果您尝试过background-size，则应该看一下object-fit，它对图像准确，结果非常相似background-size / background-image

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

object-fit CSS属性指定如何调整替换元素（例如<img>或<video>）的内容以适合其容器。

.site {
  background: #000;
}

.partners img{
  width:100%;
  height:100px;
  object-fit: cover;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="site">
  <div class="row d-flex">
    <div class="col-md-4 partners">
      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/48/FIS_%28company%29_Fidelity_National_Information_Services_Inc._Corporate_Logo.svg/640px-FIS_%28company%29_Fidelity_National_Information_Services_Inc._Corporate_Logo.svg.png" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://s3.amazonaws.com/freebiesupply/large/2x/ing-logo-png-transparent.png" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://www.careinternational.org.uk/linking-for-change/images/Barclays-Ross-Kingsland.png" />
    </div>
  </dpaiv>
  <div class="row d-flex">
    <div class="col-md-4 partners">
      <img src="https://cdn.images.express.co.uk/img/dynamic/1/590x/rbs-400775.jpg" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://www.sundaypost.com/wp-content/uploads/sites/13/2016/05/banks-900x540.jpg" />
    </div>
    <div class="col-md-4 partners">
      <img src="https://www.leftovercurrency.com/wp-content/uploads/2016/11/the-royal-bank-of-scotland-plc-10-pounds-banknote-obverse-1.jpg" />
    </div>
  </div>
</div>

语法

object-fit属性被指定为从下面的值列表中选择的单个关键字。   值

包含       替换后的内容按比例缩放以保持其纵横比，同时适合元素的内容框。使整个对象填充框，同时保留其长宽比，因此，如果其宽高比与框的长宽比不匹配，则将“信箱”化。

封面       替换内容的大小可在填充元素的整个内容框时保持其纵横比。如果对象的长宽比与框的长宽比不匹配，则对象将被裁剪以适合对象。

填充       替换后的内容的大小可填充元素的内容框。整个对象将完全填满该框。如果对象的长宽比与框的长宽比不匹配，则对象将被拉伸以适合。

无       替换的内容不会调整大小。

缩小       内容的大小就像没有指定内容或包含任何内容一样，以较小的具体对象大小为准。

其他与图像相关的CSS属性：object-position，image-orientation，image-rendering，image-resolution。

使3张图像大小相同（完整示例）

3 个答案:

语法