Img в контенте растягиваются при изменении экрана?

Question

[svilkov87]

Всем привет!
Пытаюсь сделать контент на Bootstrap, аналогично этому:


Создал контент, в который поместил image. Но они растянуты и выглядит это весьма убого.
Как это реализовать, подобно примеру выше?
Код:

<div class="container-fluid">
        <div class="row">
                <div class="navbar navbar-inverse" role="navigation"></div>
        </div>
    </div><!--nav-->
    <div class="container">
        <div class="row">
          <div class="col-sm-9 page-content col-thin-right">
           <!-- test-img first row-->
            <a href="#"><img class="col-md-4 col-sm-6 col-xs-12" src="http://www.goodfon.su/download/desert-morozhenoe-yagody-malina/1366x768"></a>
            <a href="#"><img class="col-md-8 col-sm-6 col-xs-12" src="http://www.goodfon.su/download/pirog-pechene-skalka-elovye/1366x768"></a>
            <!-- second row-->
            <div class="col-md-4 col-sm-6 col-xs-12"></div>
            <div class="col-md-4 col-sm-6 col-xs-12"></div>
            <div class="col-md-4 col-sm-6 col-xs-12"></div>
            <!-- third row-->
            <div class="col-md-8 col-sm-6 col-xs-12"></div>
            <div class="col-md-4 col-sm-6 col-xs-12"></div>
            </div>
            
            <!--sidebar-->
            <div class="col-sm-3 page-sidebar col-thin-left">
               <div class="col-md-12 col-sm-12 col-xs-12">
                   <h1>sidebar</h1>
               </div>               
            </div>
        </div><!--row-->
    </div><!--container-content-->

.col-md-4{
    outline: 1px solid black;
    height: 200px;
}
.col-md-8{
    outline: 1px solid black;
    height: 200px;
}
.col-md-12{
    outline: 1px solid black;
    height: 350px;
}
.col-md-4,
.col-md-8,
.col-md-12
{
padding-right: 0;
padding-left: 0;
}

Answer 1

[Donald Dak]

У вас ширина картинки мала к соотношению высоте картинки, у той картинки height всего 200px а width 565px
сделайте height хотя бы на 300px.
вот посмотрите на примере тут уже картинка выглядит лучше codepen.io/anon/pen/vLeRVG?editors=110
если вы в классе col-md-8 col-sm-6 col-xs-12 сделаете height: auto то картинка примет оптимальную ширину по отношению к высоте картинки, но картинки разного разрешения и будут блоки с картинками разного размера, попробуйте сделать одинаковую высоту картинки или вставьте картинки с одинаковым разрешением

Answer 2

[Sanan Yuzb]

В тег img добавьте класс img-responsive

Comments

[Donald Dak]

У него разрешение картинок на примере очень разное у первой 1366px на 768 а у второй 3586 на 2391
и при height: auto блоки будут разной высоты

[svilkov87]

Don_Donald: вот вот

[Donald Dak]

svilkov87: Вам нужно или уменьшить разрешение второй картинки или увеличть height обеих картинок

[Sanan Yuzb]

Сделайте высоту у всех одинаковой

Answer 3

[Кирилл]

в процентах размеры используйте