CODEWITHSUNDEEP
htmlcssresponsive-design
Michal Hančar
Michal Hančar

Reputation: 3

Fill responsive div with responsive image

I tried many ways to achieve this but without success.

Basically, I want to have a div element (like a card) with an image and a text under the image and the goal is to make it responsive so that when the user scales down the browser or they use their phone, this whole div does not get messed up but keeps its proportions. The goal is to have multiple card-like divs setup in a 3x3 matrix. The requirement is that no matter what image is there, it just fills the container - the image should not keep its aspect ratio if its too big, it should always be a squere.

link to current state*

(*it says I am too low level to have images in my posts)

As you can see, the current problem is that the image itself does not fill in the container but, keeps the aspect ration which means the whole container div is different height and it gets pushed to another line instead of making it 3x3. That is as far as I got.

Code is here:

.box {
  max-width: 120px;
  max-height: 120px;
}

.card-image {
  width: 100%;
  height: 100%;  
  max-width: 90px;
  max-height: 90px;
  border: 1px solid black;
}

<div class="box">
  <img ng-src="{{item.img}}" ng-if="item.img" class="app-image" />
  <div style="font-size:80%;">{{item.name}}</div>
</div>

I am using angular to fill in the images but that should have no impact on the solution. As far as I know, setting width and height by adding "vw"s to these css parameters is not the best way because then it keeps these values fixed and it is not really responsive

So, at the end of the day, there are two ways you can help me out: 1) with the current code I have, add some css that will make the images stretch its height so that it is the same as width 2) suggest more optimal solution

Thank you

Upvotes: 0

Views: 2208

Answers (2)

m.cekiera
m.cekiera

Reputation: 5395

I think the easiest way, with nice browser compatibility would be something like this:

.item {
  width: 30%;
  height: 0;
  padding-top: 30%;
  display: inline-block;
  background-size: cover;
  background-position: center;
}

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  
  resize: both;
  overflow: auto;
}
<div class="container">
  <div class="item" style="background-image: url(https://dummyimage.com/600x400/000/fff)"></div>
  <div class="item" style="background-image: url(https://dummyimage.com/400x400/000/fff)"></div>
  <div class="item" style="background-image: url(https://dummyimage.com/300x400/000/fff)"></div>
</div>

The image will always fill the whole container, and container will keep ratio. You will need to work a little bit on multi row layout, but still I find it the easiest way.

Upvotes: 1

Gautam Naik
Gautam Naik

Reputation: 9338

.card-image {
  width: 100%;
  height: 100%;  
  max-width: 90px;
  max-height: 90px;
  border: 1px solid black;
  object-fit:fill; /* try fill,cover,contain for different results*/
}

For more info Object fit CSS tricks

Upvotes: 1

Related Questions