Столбец фиксированной высоты - сохранить соотношение сторон изображения?

-1

Мой код здесь: JSFiddle (я работаю с Bootstrap 3)Столбец фиксированной высоты - сохранить соотношение сторон изображения?

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

Если удалить:

img { 
width: 100%; 
height:100%; 
}

изображения просто получить обрезаны ...

Размер столбца фиксирована, потому что я хочу, чтобы все тело страницы по размеру окна по вертикали и не имеют полоса прокрутки, так как я работаю над настольным приложением, и единственным решением, которое я нашел, является определение всего в единицах Viewport.

Я не уверен, что я даже на правильном пути, пытаясь определить все в vh/vw? Может быть, есть другой способ?

Это очень грубо говоря (или рисунок ..), что я хочу достичь в конце: Layout

Любой вход на все было бы весьма признателен.

источник

2016-08-14 angularchobo

Что вам нужно на самом деле? –

У вас там много приличий, и я не знаю, почему вы добавили их, чего хотите получить. –

Если вы установили на изображение значения 'width' и' height', он будет растягиваться, чтобы соответствовать обоим. Вы должны определить ** только один **, чтобы предотвратить это поведение. –

Используйте div s, если img -tags и приведите им изображение src в качестве фонового рисунка. Затем вы можете установить background-size на containcover.

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
html, body{ 
 
    height:100vh; 
 
    overflow:hidden; 
 
} 
 

 
.container-fluid { 
 
    height: 80vh; 
 
    width: 90vw; 
 
    overflow-y:hidden; 
 
} 
 

 
.col-lg-6 { 
 
    height: 32vh; 
 
    overflow:hidden; 
 
} 
 

 
.col-md-6 { 
 
    height: 32vh; 
 
    overflow:hidden; 
 
} 
 

 
.col-s-6 { 
 
    height: 32vh; 
 
    overflow:hidden; 
 
} 
 

 
img { 
 
width: 100%; 
 
    height:100%; 
 
} 
 

 
#img-1 { 
 
    background: url(http://farm5.staticflickr.com/4149/5174348786_e4a8494137.jpg) center center no-repeat; 
 
    background-size: contain; 
 
    height: 100%; 
 
} 
 

 
#img-2 { 
 
    background: url(http://noliesradio.org/wp/wp-content/uploads/2014/02/introslide.JPG_.jpg) center center no-repeat; 
 
    background-size: cover; 
 
    height: 100%; 
 
}

<div class="container-fluid"> 
 
<div class="row"> 
 
     <div class="row"> 
 
      
 
    <div class="col-lg-6 col-md-6 col-s-6"> 
 
     <div id="img-1" src="http://farm5.staticflickr.com/4149/5174348786_e4a8494137.jpg"> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-s-6"> 
 
     <div id="img-2"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
      
 
    <div class="col-lg-6 col-md-6 col-s-6"> 
 
     <img src="http://www-static.weddingbee.com/pics/52547/jacaranda.jpg"> 
 
    </div> 
 
             
 
    <div class="col-lg-6 col-md-6"> 
 
     <img src="http://www.paramountplants.co.uk/images/evergreen-screening/acer-palmatum-dissectum-garnet-specimen-tree.jpg"> 
 
    </div> 
 
    </div> 
 
    </div>

источник

2016-08-14 10:52:05

Столбец фиксированной высоты - сохранить соотношение сторон изображения?

ответ

Смежные вопросы