How to proportionately reduce the height of element contains images?

Question

HTML, CSS

To make something like the following images, I wrote a CSS (result).

<div id="ulWrapWrap">
    <div id="ulWrap">
        <ul>
            <li>
                <div class="imgWraps"><img src="http://i.imgur.com/QW18s8F.png" alt=""></div>
            </li>
            <li>
                <div class="imgWraps"><img src="http://i.imgur.com/QW18s8F.png" alt=""></div>
            </li>
        </ul>
    </div>
</div>

html, body { height: 100%; }
body { background-color: DodgerBlue; }

#ulWrapWrap { display: table; height: 100%; margin: 0 auto; }
#ulWrapWrap #ulWrap { display: table-cell; max-height: 100%; vertical-align: middle; }
#ulWrapWrap #ulWrap ul { max-width: 90%; max-height: 90%; margin: 0 auto; padding: 10% 20%; background-color: HotPink; }
#ulWrapWrap #ulWrap ul:after { display: block; clear: both; content: ''; }
#ulWrapWrap #ulWrap ul li { float: left; display: table; max-width: 45%; height: 100%; margin-right: 10%; }
#ulWrapWrap #ulWrap ul li:last-child { margin-right: 0; }
#ulWrapWrap #ulWrap ul li .imgWraps { display: table-cell; vertical-align: middle; }
#ulWrapWrap #ulWrap ul li .imgWraps img { max-width: 100%; max-height: 100%; }

Best result

(1) When I resize a window horizontally.

(2) When I resize a window vertically.

Current result

It works well for (1), but doesn't work for (2). How can I make it work? ;)

(1) When I resize a window horizontally.

(2) When I resize a window vertically.

AMS · Accepted Answer · 2017-03-17T19:29:52.690

3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
        <style>
            html, body { padding:0px; margin:0px; }
            body { background-color: DodgerBlue; height:100%; width:100%; }
            .ulWrapWrap
            {
                box-sizing:border-box;
                padding:20px;
                margin:0px auto;
                text-align:center;
                background-color:HotPink;
                display:block;
                height:calc(90vmin);
                width:calc(90vmin);
                margin-top: calc(100vh * 0.5 - 90vmin * 0.5);
                margin-left: calc(100vw * 0.5 - 90vmin * 0.5);
            }

            .dimage
            {
                box-sizing:border-box;
                width:40%;
                height:100%;
                display:inline-block;
                padding-right:10px;
                background:url('http://i.imgur.com/QW18s8F.png') 50% 50% no-repeat;
                background-size:contain;
            }
        </style>
        <title>JS Bin</title>
    </head>
    <body>
        <div class="ulWrapWrap">
            <div style="width:100%; height:100%; position:relative; display:block;">
                <div class="dimage"></div>
                <div class="dimage"></div>
            </div>
        </div>
    </body>
</html>

edited Mar 17 '17 at 19:29

answered Mar 17 '17 at 06:55

AMS

104
9

I know it requires some changes to your code but it is the right way to do it with less complexity and best performance ;) – AMS Mar 17 '17 at 06:58
Thank you for answer, but I tried this, it didn't work so well. I think because elements' height and width are fixed, it changed its size proportionately. What's the my problem? When you have the time, please tell me how to do it. http://jsbin.com/quxisujuze/1/edit?html,css – left click Mar 17 '17 at 09:17
I modified the code for you just to demonstrate how to use background-size attribute, then use the same approach to apply this on your hierarchy. – AMS Mar 17 '17 at 09:48
Thank you for your kindness!, but It seems different from what I want.. Did I happen to do something wrong? I tried it on JS Bin and local. (http://jsbin.com/bobucilosu/edit?html,css) A following image is about thing I think it looks different. (http://imgur.com/a/zyZwd) The one above is what I want, the one below is what I got a result from your code. – left click Mar 17 '17 at 10:24
Try your code outside of JSBin because it adds new parameters to your problem because it is inside iframe and that will lead to wrong HTML and body tag sizes. – AMS Mar 17 '17 at 10:28
I pasted your code to a HTML file and executed it on local. But I got same result. These are screenshot for result. http://imgur.com/a/og53z http://imgur.com/a/4wL8A http://imgur.com/a/QY3nN (I tested it in windows 7, Firefox 52.0, Internet Explorer 11, Chrome 57.0) – left click Mar 17 '17 at 10:41
Yes the only thing remaining is to uncomment the contain and comment cover I expected you want it – AMS Mar 17 '17 at 10:43
I also recommend to take a look at css3 attribute called calc which will solve all your issues for sure but I prefer using my approach just for backward compatibility – AMS Mar 17 '17 at 10:46
Thank you for your continued comments. Yes, It works well for images' size. but Its container is fixed not like screenshot I want the result for. http://imgur.com/a/GkwzB http://imgur.com/a/BWprt http://imgur.com/a/Ir34f I think because the height and width is fixed.. but if I use background-images instead of a img element, I can't help fix height and widht, right? That's so confusing.. (I'm sorry I'm not good at english.) – left click Mar 17 '17 at 11:02
Now I got your point exactly sorry it was my fault I thought about the image only. If you want to resize the container also try using calc attribute in CSS for width and height for the container if you haven't found how to use it I may send you an example today evening. – AMS Mar 17 '17 at 12:40
I really appreciate your effort :) I can't find how to apply to my code. I think I have to set a
– left click Mar 17 '17 at 13:54
Sure I will send you a fully working version as expected in your question but I need some time because I am still at work now. Just when I return to home I will solve it for you. – AMS Mar 17 '17 at 13:55
Thanks a lot! That's very thoughtful of you. – left click Mar 17 '17 at 13:59
I have edited the answer to match your request exactly...hope you find it helpful. – AMS Mar 17 '17 at 19:30
Thank you. It's so helpful. I think the point is to use calc() with vh, ... units. I learned a lot from you. :) – left click Mar 18 '17 at 03:27

score 0 · Answer 2 · edited May 23 '17 at 12:25

0

You can check out this question: Why is percentage height not working on my div?

Basically you'll need to give height in percentages to all the elements. The CSS height property, when used with a percentage value, is calculated with respect to the element's containing block.

Hope this helps.

edited May 23 '17 at 12:25

Community

1
1

answered Mar 17 '17 at 06:54

Hardik

283
1
8
19

How to proportionately reduce the height of element contains images?

HTML, CSS

Best result

Current result

2 Answers2