CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user10038740
user10038740

Reputation: 1

Make 3 images the same size (Complete Example)

I have this very basic example but I'm not able to create a row of images that looks good.

In my example the images look stretched.

Is there a way to improve this?

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

Upvotes: 0

Views: 111

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105853

If you tried background-size, you should take a look at object-fit which is accurate to image, results are very much alike background-size/background-image

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

The object-fit CSS property specifies how the contents of a replaced element, such as an <img> or <video>, should be resized to fit its container.

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

Syntax

The object-fit property is specified as a single keyword chosen from the list of values below. Values

contain The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. The entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" if its aspect ratio does not match the aspect ratio of the box.

cover The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.

fill The replaced content is sized to fill the element’s content box. The entire object will completely fill the box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit.

none The replaced content is not resized.

scale-down The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.

Other image-related CSS properties: object-position, image-orientation, image-rendering, image-resolution.

Upvotes: 0

Nico Zimmer
Nico Zimmer

Reputation: 321

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

or 

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

Upvotes: 0

Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

when you break this option your image see stretch, you want one side fee height or width.

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

See more details How to make two images responsive with fixed height and plain CSS?

Upvotes: 1

Related Questions