图像未使用flexbox调整大小

时间：2015-11-21 12:31:18

标签： html css css3 flexbox

图像（#avatar）没有用flex调整高度，我试着把手高度调整起来。但我非常希望用flex完成。

不知道这是我的错误还是错误导致...

添加完整的示例代码。

只有当我在#avatar中添加它时才能正常工作：     - 身高：10vh; 

body{
    margin: 0;
}

.startContainer {
    width: 100vw;
    height: 100vh;
    position: absolute;
    
    background-image: url("http://i.imgur.com/NVYPtGJ.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    
    display: -webkit-box;
    
    display: -webkit-flex;
    
    display: -ms-flexbox;
    
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.startSideItem {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 30vw;
    -ms-flex: 0 1 30vw;
    flex: 0 1 30vw;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

.startCenterItem {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 40vw;
    -ms-flex: 0 1 40vw;
    flex: 0 1 40vw;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

.sideItem {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

.centerContainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.topBottomCenterItem {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 1 1 30vh;
    -ms-flex: 1 1 30vh;
    flex: 1 1 30vh;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

.centerItem {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 10vh;
    -ms-flex: 0 1 10vh;
    flex: 0 1 10vh;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

#avatar {
    display: block;
    /*max-width:357px;
    max-height:380px;
    width: 100%;
    height: auto;*/
    max-width: 100%;
    max-height: 100%;
}

.sideContainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.arrow {
    display: inline-block;
    max-width:45px;
    max-height:75px;
    width: 100%;
    height: auto;
}

#rotateLeft {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

#rotateDown {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jorge Beltrán Núñez</title>
    <link rel="stylesheet" href="css/preload.css">
    <link rel="stylesheet" href="css/index.css">
    <link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>

</head>

<body>
    <div class="startContainer">
        <div class="startSideItem sideContainer">
            <div class="sideItem">
                <img alt="" class="arrow" id="rotateLeft" src="http://i.imgur.com/XBejH02.png">
                <p>Sobre mi</p>
            </div>
        </div>
        <div class="startCenterItem centerContainer">
            <div class="topBottomCenterItem"></div>
            <div class="centerItem">
                <img alt="" id="avatar" src="http://i.imgur.com/m5U9gy2.png">
            </div>
            <div class="topBottomCenterItem">
                <p>Contacto</p>
                <img alt="" class="arrow" id="rotateDown" src="http://i.imgur.com/XBejH02.png">
            </div>
        </div>
        <div class="startSideItem sideContainer">
            <div class="sideItem">
                <p>PortFolio</p>
                <img alt="" class="arrow" src="http://i.imgur.com/XBejH02.png">
            </div>
        </div>

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/jquery.gsap.min.js"></script>
<!--    <script src="js/preload.js"></script>-->
</body>

</html>

2 个答案:

答案 0 :(得分：0)

试试这个 - 

.centerItem {
  order: 0;
  flex: 0 1 10vh;
  overflow: hidden; /*NEW*/
  align-self: auto;
}

答案 1 :(得分：0)

但是这个补丁是补丁。我在父级和图像（子）中没有它：max-height：100％;

Image inside flex-item ignores max-height:100% in chrome and firefox - (works in safari)

相关问题
最新问题