html - 响应高度？

Question

我正在开发一个响应式的 wordpress 主题，但我没有什么问题。我的页面包含几个并排显示的框。每个框都有一个响应的高度和宽度，并包含一个图像和文本（文本覆盖在图像上）。

考虑到正确的纵横比（图像），有没有办法将所有框设置为相同的高度？另外，如果某些框不包含图像？

实时预览：http ://apu.sh/3ne

JsFiddle http://jsfiddle.net/tjwHk/

Answer 1

My suggestion for your case is to fix all the boxes width & height to a value of your preference.

then, give a max-width & max-height of 100% to the image. causing it to never overflow the parent div [box] without losing the aspect ratio of the image. (if you'll try to do this with width & height you will lose the ratio)

Edit: padding:none; is not valid. use padding:0; instead

So, to summarize, change this in your CSS:

#custom-list .custom-list-element
    {
        width: 50%;
        height: 200px; /* fix any height you want*/
        float: left;
        background-color: #333333;
        text-align: center; /*so the image will always be centered in the div*/
        position: relative;
    }

        #custom-list .custom-list-element img
        {
            max-width: 100%; /* the width never overflow the div*/
            max-height: 100%; /* the height never overflow the div*/
        }
            #custom-list .custom-list-element article p
            {
                padding: 0; /* valid value */
            }

            #custom-list .custom-list-element article h1
            {
                color: #fff;
                padding: 0; /* valid value */
                font-size: 1.5em;
            }

and finally, because I like Fiddles so much.. http://jsfiddle.net/avrahamcool/tjwHk/1/