Question

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

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

JsFiddle http://jsfiddle.net/tjwHk/

Answer 1

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

然后，给max-width＆amp;图片的max-height为100％。导致它永远不会溢出父div [box]而不会丢失图像的纵横比。（如果您尝试使用width＆amp; 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/

反应高度？

1 个答案: