CODEWITHSUNDEEP
javascripthtmlcss
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29129

Resize all items based on biggest height/width in a list

I have this list

<ul>
    <li><img src="https://via.placeholder.com/650x100"></li>
    <li><img src="https://via.placeholder.com/150x350"></li>
    <li><img src="https://via.placeholder.com/100"></li>
    <li><img src="https://via.placeholder.com/350x350"></li>
</ul>

with each li a different width and height. I need to render this as follows:

1) Each li needs to have the width of the widest li
2) Each li needs to have the height of the tallest li 
3) There is a max-width and max-height for li

So, with Flexbox I can easily satisfy 1) demo But I cannot satisfy width and height with css. What would be the preferred solution here. Is this even possible without javascript ?

UPDATE: I've implemented the suggestions here

Upvotes: 1

Views: 247

Answers (2)

Rich
Rich

Reputation: 3336

There's no way to retrieve an unknown height and store it as a variable with CSS even using a preprocessor like SASS, so there's no way to do #2 with CSS alone. I realize you're hoping for something purely with stylesheets, but I'm including a clean example of how you can achieve both #1 and #2 with a combination of CSS and jQuery.

I hope this helps!

var tallest;
$('li').each(function() {
  tallest = tallest > $(this).height() ? tallest : $(this).height();
});

$('li').each(function() {
  $(this).height(tallest);
});
li {
  border: 1px solid gray;
  width: 100%;
  list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><img src="https://via.placeholder.com/650x100"></li>
  <li><img src="https://via.placeholder.com/150x350"></li>
  <li><img src="https://via.placeholder.com/100"></li>
  <li><img src="https://via.placeholder.com/350x350"></li>
</ul>

Upvotes: 2

Xotic750
Xotic750

Reputation: 23472

My preferred solution would be to use Javscript, I don' know how you'd do it with CSS alone. Something like this, you should make sure that the images are loaded;

const forEach = Function.bind.call(Function.call, Array.prototype.forEach);
const reduce = Function.bind.call(Function.call, Array.prototype.reduce);
const sizeProperties = ['height', 'width'];
const images = document.querySelectorAll('ul>li>img');
const size = reduce(images, (dimensions, image) => {
  const dimension = window.getComputedStyle(image);
  sizeProperties.forEach((property) => {
    dimensions[property] = Math.max(
      dimensions[property],
      Number.parseInt(dimension[property], 10),
    );
  });

  return dimensions;
}, {
  width: 0,
  height: 0,
});

forEach(images, (image) => {
  sizeProperties.forEach((property) => {
    image.parentNode.style[property] = `${size[property]}px`;
  });
})
li {
  border-style: solid;
  border-width: 1px;
  list-style: none;
}
<ul>
  <li><img src="https://via.placeholder.com/650x100"></li>
  <li><img src="https://via.placeholder.com/150x350"></li>
  <li><img src="https://via.placeholder.com/100"></li>
  <li><img src="https://via.placeholder.com/350x350"></li>
</ul>

Upvotes: 2

Related Questions