Два небольших выравнивания изображения рядом с большим изображением

Question

Я борюсь за то, как я буду кодировать, чтобы создать два вертикальных изображения, и можно ли уменьшить высоту изображения большего размера, не уменьшая ширину? потому что мне нужно поместить его на col-md-8 в любые мысли об этом?

Это изображение, которое мне нужно сделать. Click here

HTML код

<div class="row col-md-8"> 
<img class="row img-big img-responsive" src="/assets/icons/people-crowd-child-kid-large.jpg"></div> 
</div 

CSS код

.img-big{ height: 100%;width: 100%; } 

приведенный выше код, что я использовал, чтобы сделать больше, изображение рядом с изображением 2 и 3. размер большой image is 900x767

Answer 1

Необходимо отформатировать код, как показано ниже:

<div class="row"> 
    <div class="col-md-8"> 
     <img class="img-big img-responsive" src="/assets/icons/people-crowd-child-kid-large.jpg"></div> 
    </div> 
    <div class="col-md-4"> 
     <img src="OTHER IMAGE"></div> 
     <img src="OTHER IMAGE"></div> 
    </div> 
</div> 

Как вы можете видеть два изображения внизу в col-md-4, если вы распространите ширину 100% следующее изображение будет ниже.

У вас не должно быть класса с row и col-md в названии класса. (См. http://getbootstrap.com/css/)

Что касается уменьшения высоты, а не ширины, вы не можете обрезать изображение на Paint или Photoshop и загружать изображение с правильной высотой?

Answer 2

Вы можете использовать свойство flexbox, чтобы достичь того, что вы хотите, и установить его как фон.

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
    color: white; 
 
} 
 

 
.container { 
 
    height: 767px; 
 
    display: flex; 
 
} 
 

 
.left { 
 
    background-image: url('http://i.imgur.com/AzeiaRY.jpg'); 
 
    background-size: cover; 
 
    flex: 1; 
 
} 
 

 
.right { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 0 0 50%; 
 
} 
 

 
.one { 
 
    background-image: url('http://i.imgur.com/AzeiaRY.jpg'); 
 
    background-size: cover; 
 
    flex: 50%; 
 
} 
 

 
.two { 
 
    background-image: url('http://i.imgur.com/AzeiaRY.jpg'); 
 
    background-size: cover; 
 
    flex: 50%; 
 

 
}

<div class="container"> 
 
    <div class="left">Left image</div> 
 
    <div class="right"> 
 
    <div class="one">First image</div> 
 
    <div class="two">Second image</div> 
 
    </div> 
 
</div>