Контейнер с картинками разного размера (разрешения)

Question

Контейнер с картинками разного размера (разрешения)

0

У меня есть текущий код:

CSS:

img
{
    max-width:15vw;
    max-height:15vh;
    position:relative;
    background-color:#67615d;
    display:inline-block;
    text-align:justify;
}

#container 
{
    width:80%;
    min-height:100vh;
    margin:0px;
    float:right;
    margin:0px; 
    overflow:hidden;
}

#navbar
{
 background-color:#67615d;
 width:20%;
 height:100vh;
 overflow:hidden;  
 position:fixed;
 float:left;
}



#content 
{
      width:100vw;
      min-height:100vh;
      margin:0px;
      padding:0px;
      overflow:hidden; 
      background-color:#9d948f;
}

HTML:

<html>
<body>
<div id="content">


<div id="navbar">
*stuff in the navbar*      
</div>


<div id="container">
</div><img src="pic1"></img>
</div><img src="pic2"></img>
</div><img src="pic3"></img>
</div>
</div>
</body>
</html>

В любом случае, с этим, как с моим текущим кодом (добавьте еще несколько вещей), и он выглядит так: http://i.imgur.com/9WTUNtj.jpg

Эти фотографии - просто случайные скриншоты, а остальные - случайные снимки (очевидно, только для целей тестирования, у реальной вещи будут фотографии всех разрешений). Я вышел из Google. Во всяком случае, то, что я пытаюсь сделать, автоматически настраивает фотографии так, чтобы они все вписывались в контейнер, будучи разными.

http://i.stack.imgur.com/TQCwW.png

Черные ящики - это "картинки", это то, что я пытаюсь сделать, но я продолжаю испортить здесь и там, кто-нибудь знает, как я изменил бы свой код, чтобы отображать фотографии как таковые? Любые советы или ответы были бы высоко оценены: D!

Благодаря :)

user3313854 15 фев. 2014, в 20:13

Источник

Теги:

html

css

dynamic

image

containers