根据列表中最大的高度/宽度调整所有项目的大小

Question

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

Answer 1

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> 

Answer 2

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>