How to adjust images in the box without starch using css?

Question

I have three types of images with different height and width.

Now what I am doing is, I have to display all with equal height and width.

Note: I don't want to use a background image. I am getting images form database

Snippet 1

I tried box with height and width:300px and img height:auto but images are not displaying with equal.

ul li {
  display: inline-block;
}

.box {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}

.box img {
  width: 100%;
  height: auto;
}

<ul>
  <li>
    <div class="box">
      <img src="https://cdn2.expertreviews.co.uk/sites/expertreviews/files/styles/er_main_wide/public/2019/03/best-external-hard-drive-sandisk_extreme_ssd.jpg?itok=aIFHiCLL">
    </div>
  </li>
  <li>
    <div class="box">
      <img src="https://images.unsplash.com/photo-1576973630537-dd588987df10?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
    </div>
  </li>
  <li>
    <div class="box">
      <img src="https://images-na.ssl-images-amazon.com/images/I/712xVgJWSbL._SX466_.jpg">
    </div>
  </li>
</ul>

Snippet 2

I tried with height: 100%; object-fit: cover; to the img tag but in this images are displaying big in the box.

ul li {
  display: inline-block;
}

.box {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}

.box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<ul>
  <li>
    <div class="box">
      <img src="https://cdn2.expertreviews.co.uk/sites/expertreviews/files/styles/er_main_wide/public/2019/03/best-external-hard-drive-sandisk_extreme_ssd.jpg?itok=aIFHiCLL">
    </div>
  </li>
  <li>
    <div class="box">
      <img src="https://images.unsplash.com/photo-1576973630537-dd588987df10?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
    </div>
  </li>
  <li>
    <div class="box">
      <img src="https://images-na.ssl-images-amazon.com/images/I/712xVgJWSbL._SX466_.jpg">
    </div>
  </li>
</ul>

My expected output is

Would you help me out?

You can still use background image with contain even you're getting the image from database. — Ahed Kabalan, Dec 24 '19 at 11:24
Yes, I know can use it but I don't want to use a background image. — Naren Verma, Dec 24 '19 at 11:31

Rahul · Answer 1 · 2019-12-24T12:16:41.630

I found a solution for you. Here is the Demo. You left image is the main issue. Left image haven't white space in top and bottom so you are confuse that image isn't placed in centre vertically and horizontally.

HTML

<ul>
  <li>
    <div class="box">
      <img class="center-image" src="https://cdn2.expertreviews.co.uk/sites/expertreviews/files/styles/er_main_wide/public/2019/03/best-external-hard-drive-sandisk_extreme_ssd.jpg?itok=aIFHiCLL">
    </div>
  </li>
  <li>
    <div class="box">
      <img src="https://images.unsplash.com/photo-1576973630537-dd588987df10?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
    </div>
  </li>
  <li>
    <div class="box">
      <img src="https://images-na.ssl-images-amazon.com/images/I/712xVgJWSbL._SX466_.jpg">
    </div>
  </li>
</ul>

Add a specific class for left image(When you want to center image vertically and horizontally). I add here .center-image.

CSS

*,
*:after,
*:before{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body{
  margin: 0;
  padding: 15px;
}
ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: outside none;
  padding: 0;
  margin: 0 -15px;
}
ul:not(:last-child){
  margin-bottom: 20px;
}
ul li {
  display: flex;
  padding: 15px;
}
/* Images parent global CSS */
ul li .box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  border: 2px solid #888888;
  overflow: hidden;
  border-radius: 5px;
  position: relative;
}
/* Global image CSS */
.box img {
  flex-grow: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* Specific image or center image CSS */
.box img.center-image{
  display: block;
  height: auto;
  max-width: 100%;
  width: auto;
}

Hope this help!

How you assign center-image class? when you are getting images from the database? — Naren Verma, Dec 24 '19 at 12:22
If you aren't able to add `center-image` `class` then you have to insert correct image that will fit in box. I just showing you how you get desire result. — Rahul, Dec 24 '19 at 12:39

Nicolas HERMET · Answer 2 · 2019-12-26T05:28:49.040

0

I have a solution using flex-box. Don't know if it is a problem for you. But it works for me.

The idea is to make your ul flex. Inside you seem to want to have ul li as display: inline-box; so I kept this as a requirement (but not necessary).

This way your .box allow to center the images in the middle of your div.

Then, this page was helping to have the right size of your images.

Here is the final css code :

    ul {
      display: flex;
    }

    ul li {
      display: inline-block;
    }

    .box {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto;
      width: 300px;
      height: 300px;
      border: 1px solid #000;
    }

    img {
      margin: auto;
      max-width: 100%;
      max-height: 100%;
    }

<ul>

  <li>
    <div class="box">
   <img src="https://cdn2.expertreviews.co.uk/sites/expertreviews/files/styles/er_main_wide/public/2019/03/best-external-hard-drive-sandisk_extreme_ssd.jpg?itok=aIFHiCLL">
  </div>
 </li>
  <li>
    <div class="box">
     <img src="https://images.unsplash.com/photo-1576973630537-dd588987df10?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
   </div>
  </li>
  <li>
   <div class="box">
    <img src="https://images-na.ssl-images-amazon.com/images/I/712xVgJWSbL._SX466_.jpg">
   </div>
  </li>
 </ul>

Let me know if it helps.

edited Dec 26 '19 at 05:28

answered Dec 24 '19 at 12:12

Nicolas HERMET

138
2
10

Can you share the snippet? because I tried your code I am getting the output like https://prnt.sc/qf5og4 – Naren Verma Dec 24 '19 at 12:19
Sorry this is kinda new to me. Can you detail what you expect from me ? – Nicolas HERMET Dec 24 '19 at 12:24
I added my expected output in the question at the end of the question. – Naren Verma Dec 24 '19 at 12:26
Yes you are right I see the difference between your output and mine. The problem is that my solution preserve aspect ratio. Your goal doesn't. It's ok but we'll need your strategy here. Do we agree that width should be truncated in any cases (we first adapt height at 100%, and truncate width if needed) ? – Nicolas HERMET Dec 24 '19 at 14:45
@Naren Verma : In such case (we put height at 100% and truncate width if needed) I don't see how we can deal with the first image (scan disk). Indeed, there are almost no margin on top and bottom of this picture. If that is not a problem : `.box { display: flex; align-items: center; justify-content: center; margin: auto; width: 300px; height: 300px; border: 1px solid #000; overflow: hidden; } img { margin: auto; max-height: 100%; height: 100%; width: auto; }` will do the trick – Nicolas HERMET Dec 24 '19 at 14:51
Sorry for the late reply, Give me some time to check this – Naren Verma Dec 26 '19 at 05:04
No problems ;) merry Christmas by the way – Nicolas HERMET Dec 26 '19 at 05:10
Also, I am planning to show images with an aspect ratio. Thank you very much and Merry Christmas you too. – Naren Verma Dec 26 '19 at 05:10
Happy new year. So is my solution clear enough for you? or do you need clarifications? – Nicolas HERMET Jan 07 '20 at 11:04

score 0 · Answer 3 · answered Dec 24 '19 at 12:58

ul  {
  display:flex;
  flex-wrap: wrap;
}

.box {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}

.box1
{
  background: url('https://cdn2.expertreviews.co.uk/sites/expertreviews/files/styles/er_main_wide/public/2019/03/best-external-hard-drive-sandisk_extreme_ssd.jpg?itok=aIFHiCLL')no-repeat center center;
  background-size : contain;
}
.box2
{
  background: url('https://images.unsplash.com/photo-1576973630537-dd588987df10?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80')no-repeat center center;
  background-size : contain;
}
.box3
{
  background: url('https://images-na.ssl-images-amazon.com/images/I/712xVgJWSbL._SX466_.jpg')no-repeat center center;
  background-size : contain;
}

<ul>
  <li>
    <div class="box1 box">
    
    </div>
  </li>
  <li>
    <div class="box2 box">
    
    </div>
  </li>
  <li>
    <div class="box3 box">
   
    </div>
  </li>
</ul>

score 0 · Answer 4 · answered Dec 24 '19 at 13:00

Am using background-image and flex-layout. Try something like this

ul  {
  display:flex;
  flex-wrap: wrap;
  list-style-type: none;
}

.box {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}

.box1
{
  background: url('https://cdn2.expertreviews.co.uk/sites/expertreviews/files/styles/er_main_wide/public/2019/03/best-external-hard-drive-sandisk_extreme_ssd.jpg?itok=aIFHiCLL')no-repeat center center;
  background-size : contain;
}
.box2
{
  background: url('https://images.unsplash.com/photo-1576973630537-dd588987df10?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80')no-repeat center center;
  background-size : contain;
}
.box3
{
  background: url('https://images-na.ssl-images-amazon.com/images/I/712xVgJWSbL._SX466_.jpg')no-repeat center center;
  background-size : contain;
}

<ul>
  <li>
    <div class="box1 box">
    
    </div>
  </li>
  <li>
    <div class="box2 box">
    
    </div>
  </li>
  <li>
    <div class="box3 box">
   
    </div>
  </li>
</ul>

I don't want to use background image. and it's not my expected output — Naren Verma, Dec 24 '19 at 13:05

How to adjust images in the box without starch using css?

4 Answers4