如何在一行中设置图像的div？

Question

你好，我有一个问题，我的图像在divs。

jsFiddle

.navbar { 
 
    position: fixed; 
 
    z-index: 1000; 
 
    height: 100%; 
 
    width: 60px; 
 
    left: 0px; 
 
    top: 0px; 
 
    background-color: #2e2d2d; 
 
    border-right: 1px solid #c6c5c5; 
 
} 
 
#works { 
 
    position: relative; 
 
    margin-left: 60px; 
 
    height: 100%; 
 
} 
 
.left { 
 
    position: relative; 
 
    width: 50%; 
 
    float: left; 
 
} 
 
.right { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 50%; 
 
    float: left; 
 
} 
 
#works .up { 
 
    width: 100%; 
 
    height: 50%; 
 
} 
 
.up h1 { 
 
    font-family: ralewayregular; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    font-size: 10px; 
 
    padding: 10px 15px; 
 
} 
 
.up h2 { 
 
    font-family: ralewayregular; 
 
    font-size: 5pt; 
 
    padding: 1px 15px; 
 
} 
 
.down_1 { 
 
    float: left; 
 
    width: 50%; 
 
    height: 50%; 
 
} 
 
.down_2 { 
 
    float: left; 
 
    width: 50%; 
 
}

<div class="navbar"> 
 
    <a class="menu-trigger"></a> 
 
</div> 
 
<section id="works"> 
 
    <div class="all"> 
 
    <div class="left"> 
 
     <img src="http://i.telegraph.co.uk/multimedia/archive/02194/Bank2_2194348b.jpg" width="100%"> 
 
    </div> 
 
    <div class="right"> 
 

 
     <div class="up"> 
 
     <h1>bl bla</h1> 
 
     <h2>/asdasda <br /> as : VENEZIA 
 
        /SELLEKTOR/SUGARPILLS/NIKKI LISSONI</h2> 
 
     <div class="arrow"></div> 
 

 
     </div> 
 

 
     <div class="down_1"> 
 
     <img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" width="100%" height="100%" /> 
 
     </div> 
 

 
     <div class="down_2"> 
 

 
     <img src="http://cutebabywallpapers.com/wp-content/uploads/2014/09/cute-a-little-baby-and-cat-pictures.jpg" width="100%" /> 
 
     </div> 
 

 
    </div> 
 

 
    </div> 
 
</section>

事业部左侧必须有一个像格的权利一样HIGHT。两者应该以一行结束。 如何做到这一点，而不给他们高兴，不要strech我的图像？上下分区应该有50％的高度，但它不起作用。

有人可以帮我解决吗？

Answer 1

对于他们来说是相同的高度，最有一些措施，严格的高度或最小高度。

对于高度来衡量，这样做：

.left, .right { 
width: 100%; /* Adjust as needed */ 
min-height 50%; /* best to be the same as what you assume would 
be the height of the taller both DIV's so that nothing will be cut off */ 
} 

为你的形象不被歪曲，这样做：

.right img, .right img, { 
width: 100%; 
height: auto; /* Set the height to auto to give the 
image a breathing space to reduce distortion */ 
}