反应高度?

时间:2013-09-12 10:23:40

标签: html css height

我正在制作一个响应式wordpress主题,但我没什么问题。我的页面包括几个并排显示的框。每个框都有响应的高度和宽度,并包含图像和文本(文本覆盖在图像上)。

考虑到正确的宽高比(图像),有没有办法将所有框设置为相同的高度?还有一些盒子不包含图片吗?

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

JsFiddle http://jsfiddle.net/tjwHk/

1 个答案:

答案 0 :(得分:2)

我对你的案例的建议是修复所有框的宽度和宽度。高度为您的偏好值。

然后,给max-width&图片的max-height为100%。导致它永远不会溢出父div [box]而不会丢失图像的纵横比。 (如果您尝试使用width& height执行此操作,则会失去该比率)

修改: padding:none;无效。使用padding:0;代替

总而言之,请在 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;
            }

最后,因为我非常喜欢小提琴.. http://jsfiddle.net/avrahamcool/tjwHk/1/