0
Я использую Bootstrap и имею следующий HTML-код. Я хочу, чтобы левый размер большего размера оставался как ширина: 854 пикселей и высота: 480 пикселей; на дисплее обычного размера и реагировать на компактный дисплей. В настоящее время он поставляется с гибкой шириной, но высота остается неизменной. Кроме того, я хочу, чтобы фоновое изображение также реагировало. Какие изменения мне необходимо применить?Bootstrap reponsive grid issue
`
<div class="row">
<div class="col-md-9">
<a class="img-container" href="javascript: void(0);">
<div class="img-responsive" style="width:854px;height:480px;background-image: url('http://placehold.it/854x480');background-size:100% auto;"></div>
</a>
</div>
<div class="col-md-3">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/150x84" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<small>08:51</small>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/150x84" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<small>08:51</small>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/150x84" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<small>08:51</small>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/150x84" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<small>08:51</small>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/150x84" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<small>08:51</small>
</div>
</div>
</div>
</div>
</div>`